版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xukongjing1/article/details/82901054
watch除了可以监听data中数据的变化，还可以监听路由的变化。 监听 $route.path属性
watch:{
'$route.path':function(newVal,oldVal){
//console.log(newVal+"---"+oldVal);
if(newVal === '/login'){
console.log('欢迎进入登录页面');
} else if(newVal === '/register'){
console.log('欢迎进入注册页面');
}
}
}完整代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</body>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router-3.0.1.js"></script>
<script>
var login = {
template:'<h3>这是登录子组件，这个组件是奔波开发的</h3>'
}
var register = {
template:'<h3>这是注册子组件，这个组件是霸波奔开发的</h3>'
}
var router = new VueRouter({
routes:[
{path:"/",redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router,
watch:{
// this.$route.path
'$route.path':function(newVal,oldVal){
//console.log(newVal+"---"+oldVal);
if(newVal === '/login'){
console.log('欢迎进入登录页面');
} else if(newVal === '/register'){
console.log('欢迎进入注册页面');
}
}
}
})
</script>
</html>
