1 # 一、路由的props参数

  2     export default new VueRouter({

  3         routes:[

  4         {

  5             name:'guanyu', // 命名路由

  6             path:'/about', // 路劲

  7             component: About

  8         },

  9         {

 10             path:'/home',

 11             component: Home,

 12             children:[

 13                 {

 14                     path:'messages',

 15                     component: Messages,

 16                     children:[

 17                         {

 18                             name: 'xiangqing',

 19                             path: 'message/:id/:title', // params传参

 20                             component: MessageInfo,

 21                             // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传值给MessageInfo组件。

 22                             // props: {a:1,b:'hello'},

 23

 24                             // props的第二种写法，值为bool值，为true，就会把该路由组件收到的参数，以props的形式传值给MessageInfo组件。

 25                             props: true,

 26

 27                             // props的第三种写法，值为函数

 28                             // props($route){

 29                             //     return {

 30                             //         id: $route.query.id,

 31                             //         title: $route.query.title,

 32                             //         a: 1,

 33                             //         b: 'hello'

 34                             //     }

 35                             // }

 36                         }

 37                     ]

 38                 },

 39                 {

 40                     path:'news',

 41                     component: News

 42                 }

 43             ]

 44         }

 45         ]

 46     });

 47

 48 # 二、<router-link>的replace属性

 49 #    1.作用：控制路由跳转时操作浏览器历史记录的前进后退模式

 50 #    2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转默认是push。

 51 #    3.如何开启replace模式：

 52         <router-link replace ...>...</router-link>

 53

 54 # 三、编程式路由导航

 55     1.作用：不借助<router-link>实现路由跳转，让路由跳转更灵活

 56     2.具体编码：

 57         this.$router.push({  // 留痕迹在window.history

 58             name: 'xxx',

 59             params: {id:xxx,title:'xxx'}

 60         });

 61         this.$router.replace({// 不留痕迹在window.history

 62             name: 'xxx',

 63             params: {id:xxx,title:'xxx'}

 64         });

 65         this.$router.forward(); // 前进，等于window.history.forward()

 66         this.$router.back(); // 后退，等于window.history.back()

 67         this.$router.go(-2); // 可前进可后退，等于window.history.back()

 68

 69 # 四、缓存路由组件

 70     1.作用：让不展示的路由组件保持挂载，不被销毁

 71     2.具体编码：<keep-alive include="News,Meaasges"><router-view></router-view></keep-alive>

 72     注意：被<keep-alive>包含的内容会保持挂载不被销毁，include可以指定哪些组件不被销毁，它的值是组件名(也就是组件的name属性值)，不填include代表所有都不销毁

 73

 74 # 五、两个新的声明周期钩子：activated、deactivated

 75     1.作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

 76     2.具体名字：activated路由组件被激活时触发，deactivated路由组件失去激活时触发

 77

 78 # 六、全局守卫路由

 79     # 1.全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用

 80         router.beforeEach((to, from, next)=>{

 81             console.log('beforeEach', to, from);

 82             // if (to.name === 'xinwen' || to.path === '/home/messages'){  // 这里要是有十几二十个的话，就会显得累赘

 83             if (to.meta.isAuth){ // 路由的meta属性对象，是专门供我们自定义属性使用的（注意：自定义属性放在其他地方不会生效）

 84             if (localStorage.getItem('school')==='BaiYeShu'){

 85                 next();// 放行

 86                 console.log('@');

 87             }else{

 88                 alert('学校名不对！')

 89             }

 90             }else{

 91             next();

 92             }

 93         });

 94     # 2.全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用

 95         router.afterEach((to, from)=>{

 96             console.log('afterEach', to, from);

 97             if (to.meta.title){

 98             document.title = to.meta.title

 99             }else{

100             document.title = 'vue_test'

101             }

102

103         });

104         export default router;

105     # 3.独享路由（配置在路由内部）

106         {

107                     path:'news',

108                     component: News,

109                     meta:{isAuth: true, title: '新闻'}, // 路由的meta属性对象

110                     beforeEnter(to, from, next){  // 这就是独享路由，内容参数和beforeEach没区别

111                         console.log('beforeEnter', to, from);

112                         // if (to.name === 'xinwen' || to.path === '/home/messages'){  // 这里要是有十几二十个的话，就会显得累赘

113                         if (to.meta.isAuth){

114                             if (localStorage.getItem('school')==='BaiYeShu'){

115                                 next();// 放行

116                                 console.log('@');

117                             }else{

118                                 alert('学校名不对！')

119                             }

120                         }else{

121                             next();

122                         }

123                     }

124                 }

125     # 4.组件内部路由守卫（写在组件内部的回调）

126         // 通过路由规则，进入该组件时被调用

127         beforeRouteEnter(to, from, next) {

128             console.log('beforeRouteEnter');

129             next();// 放行

130         },

131         // 通过路由规则，离开组件时被调用

132         afterRouterLeave(to, from, next) {

133             console.log('afterRouterLeave');

134             next();// 放行

135         }

136