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   <script src="./node_modules/vue/dist/vue.js"></script>
10   <script src="./node_modules/vue-router/dist/vue-router.js"></script>
11 </head>
12 
13 <body>
14 
15   <div id="app">
16     <!-- <a href="#/login">login</a> -->
17     <!-- <a href="#/regis">regis</a> -->
18     <router-link to="/login?id=10&name=chp" tag="span">login</router-link>
19     <router-link to="/regis" tag="span">regis</router-link>
20     <router-view></router-view>
21   </div>
22 
23   <script>
24     var login = {
25       template: '<h4>login</h4>',
26       created() {
27           console.log(this.$route);
28       }
29     }
30     var regis = {
31       template: '<h4>regis</h4>',
32         created() {
33             console.log(this.$route);
34         }
35     }
36 
37     var routerobj = new VueRouter({
38       routes: [
39         //  路由匹配规则
40         { path: '/login', component: login },
41         { path: '/regis', component: regis }
42       ]
43     })
44 
45     new Vue({
46       el: "#app",
47       data: {},
48       methods: {
49       },
50       router: routerobj,
51       watch: {
52           // 监听到路由地址的改变
53           '$route.path': function (newValue,oldValue) {
54               if(newValue==='/login'){
55                   console.log('welcome login');
56               }
57               else {
58                   console.log('welcome regis');
59               }
60           }
61         }
62 
63     })
64   </script>
65 </body>
66 
67 </html>

 

posted @ 2019-09-18 08:47  normalboy(NB)  阅读(884)  评论(0)    收藏  举报