第八章 watch监听 84 watch-监视路由地址的改变

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Document</title>
 9     <!--导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
11     <!-- 1.导入包 -->
12     <script src="../lib/vue-router-3.0.6.js"></script>    
13   </head>
14 
15   <body>
16       <div id="app">
17       <router-link to="/login">登录</router-link>
18       <router-link to="/register">注册</router-link>
19 
20     <!-- 容器 -->
21     <router-view></router-view>
22 
23       </div>
24 
25       <script>
26       //2.创建子组件
27       var login={
28         template:'<h3>这是登录子组件，这个组件是 江小白 开发的。</h3>'
29       }
30 
31       var register={
32         template:'<h3>这是注册子组件，这个组件是 白小江 开发的。</h3>'
33       }
34 
35       //3.创建一个路由对象
36       var router=new VueRouter({
37         routes:[//路由规则数组
38           {path:'/',redirect:'/login'},
39           {path:'/login',component:login},
40           {path:'/register',component:register}
41         ],
42         linkActiveClass:'myactive'  //和激活相关的类
43       })
44 
45       
46           //创建 Vue 实例，得到 ViewModel
47           var vm =  new Vue({
48               el:'#app',
49         data:{ },
50         methods:{ },
51         // router:router
52           router,
53           watch:{
54             //this.$route.path
55             '$route.path':function(newVal,oldVal){
56               // console.log(newVal + ' --- ' +oldVal)
57               if(newVal==='/login'){
58                 console.log('欢迎进入登录页面')
59               }else if(newVal==='/register'){
60                 console.log('欢迎进入注册页面')
61               }
62             }
63           }
64           });
65       </script>
66   </body>
67 </html>