Created
January 24, 2022 21:39
-
-
Save joelibaceta/88dd5e829ad684ebc32a4f55a01e33b4 to your computer and use it in GitHub Desktop.
router3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const router = new VueRouter({ | |
| routes: [ | |
| {path: "/hello/:name", component: "hello"}, | |
| {path: "/bye/:name", component: "bye"} | |
| ] | |
| }) | |
| const app = new Vue({ | |
| router, | |
| data: { | |
| name: "" | |
| }, | |
| methods: { | |
| SayHello: function(){ | |
| this.$router.push("/hello/" + this.name) | |
| }, | |
| SayBye: function(){ | |
| this.$router.push("/bye/" + this.name) | |
| } | |
| } | |
| }).$mount("#app") |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Vue.component('bye', { | |
| template: "<p> Bye {{ this.$route.params.name }}" | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Vue.component('hello', { | |
| template: "<p> Hello {{ this.$route.params.name }}" | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
| <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"/> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <input v-model="name"></input> | |
| <button v-on:click="SayHello">Say Hello</button> | |
| <button v-on:click="SayBye">Say Bye</button> | |
| <router-view></router-view> | |
| </div> | |
| <script src="components/bye.js"></script> | |
| <script src="components/hello.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment