简单的两个路由,就无法监听到路由变化,不知道怎么回事
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>
var router = new VueRouter({
routes: [{
name: 'home',
component: {
template: '<div><router-link :to="{name:\'test\'}">test</router-link> home</div>',
watch: {
'$route': function(route) {
// 监听不到变化??
console.log('home', route);
}
}
},
path: '/',
}, {
name: 'test',
component: {
template: '<div><router-link :to="{name:\'home\'}">home</router-link> test</div>',
watch: {
'$route': function(route) {
// 监听不到变化??
console.log('test', route);
}
}
},
path: '/test'
}],
});
new Vue({
el: '#app',
router: router,
watch: {
'$route': function(route) {
//可以监听到变化
// console.log('watch', route);
},
}
});
</script>
</body>
</html>
app组件下不是能正常监听吗
子组件被切换走后就被销毁了,当然监听不到