console
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const User = {
template: '<div>User {{ $route.params.id }}</div>',
mounted() {
console.log(JSON.stringify(this.$route.params))
},
watch: {
$route(to, from) {
console.log(2)
}
},
beforeRouteUpdate (to, from, next) {
}
}
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '/user/:id', component: User }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/user/15">Go to user</router-link>
</p>
<router-view></router-view>
</div>