VUE实例课程---30、watch监听路由地址的改变
一、总结
一句话总结：
直接使用watch属性监听$route.path的改变即可，例如$route.path是'/login'表示登录页面
watch: {
// this.$route.path
'$route.path': function (newVal, oldVal) {
// console.log(newVal + ' --- ' + oldVal)
if (newVal === '/login') {
console.log('欢迎进入登录页面');
} else if (newVal === '/register') {
console.log('欢迎进入注册页面');
}
}
}
二、watch监听路由地址的改变
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>watch监听路由地址的改变</title> 6 </head> 7 <body> 8 <!-- 9 10 直接使用watch属性监听$route.path的改变即可，如果$route.path是'/login'表示登录页面 11 12 --> 13 <div id="app"> 14 <router-link to="/login">登录</router-link> 15 <router-link to="/register">注册</router-link> 16 17 <!-- 容器 --> 18 <router-view></router-view> 19 20 </div> 21 <script src="../js/vue.js"></script> 22 <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script> 23 <script> 24 // 2. 创建子组件 25 let login = { 26 template: '<h3>这是登录 登录 子组件。</h3>' 27 }; 28 29 let register = { 30 template: '<h3>这是注册 注册 子组件。</h3>' 31 }; 32 33 // 3. 创建一个路由对象 34 let router = new VueRouter({ 35 routes: [ // 路由规则数组 36 { path: '/', redirect: '/login' }, 37 { path: '/login', component: login }, 38 { path: '/register', component: register } 39 ], 40 linkActiveClass: 'myactive' // 和激活相关的类 41 }); 42 43 // 创建 Vue 实例，得到 ViewModel 44 let vm = new Vue({ 45 el: '#app', 46 data: {}, 47 methods: {}, 48 // router: router 49 router, 50 watch: { 51 // this.$route.path 52 '$route.path': function (newVal, oldVal) { 53 // console.log(newVal + ' --- ' + oldVal) 54 if (newVal === '/login') { 55 console.log('欢迎进入登录页面'); 56 } else if (newVal === '/register') { 57 console.log('欢迎进入注册页面'); 58 } 59 } 60 } 61 }); 62 console.log(vm); 63 </script> 64 65 </body> 66 </html>
