Vue 路由的一些复杂配置

  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