vue的路由动画切换页面无法读取meta值的bug记录

君不问高堂明镜

vue路由动画切换页面无法读取meta值的bug

在vue项目的二级路由中，想要通过设置路由表中的meta值，来判断页面的slide-left 和slide-right的方向。
对于从左到右的排列，给routes依次设为1,2,3,4…的值，使其可以通过大小来判断from和to，并显示出不同的划入 / 划出效果

1. {
   
2.     path: 'aaa',
   
3.     name: 'aaa',
   
4.     component: aaa,
   
5.     meta:1
   
6. },
   
7. {
   
8.     path: 'bbb',
   
9.     name: 'bbb',
   
10.     component: bbb,
    
11.     redirect:'bbb/baba',
    
12.     meta:2,
    
13.     children: [
    
14.     {
    
15.         path: 'baba',
    
16.         name: 'baba',
    
17.         component: baba
    
18.     }, {
    
19.         path: 'ccc',
    
20.         name: 'ccc',
    
21.         component: ccc
    
22.     }, {
    
23.         path: 'ddd',
    
24.         name: 'ddd',
    
25.         component: ddd
    
26.     }, {
    
27.         path: 'eee',
    
28.         name: 'eee',
    
29.         component: eee
    
30.     }, {
    
31.         path: 'fff',
    
32.         name: 'fff',
    
33.         component: fff
    
34.     }],
    
35. },
    
36. {
    
37.     path: 'ggg',
    
38.     name: 'ggg',
    
39.     meta:4,
    
40.     component: ggg
    
41. },
    
42. {
    
43.     path: 'hhh',
    
44.     name: 'hhh',
    
45.     meta:3,
    
46.     component: hhh
    
47. },

复制代码

然鹅，
在设置的过程中，其中一个路由始终无法读到all这个路由中的meta：2
导致切换路由的动画效果出了问题

问题原因

读不到的meta的是因为设置了子路由以及重定向。

解决方法

把meta值加在它的子路由上，

1. {
   
2.     path: 'bbb',
   
3.     name: 'bbb',
   
4.     component: bbb,
   
5.     redirect:'bbb/baba',
   
6.     //meta:2,
   
7.     children: [
   
8.     {
   
9.         path: 'baba',
   
10.         name: 'baba',
    
11.         component: baba,
    
12.         meta:2
    
13.     }, {
    
14.         path: 'ccc',
    
15.         name: 'ccc',
    
16.         component: ccc
    
17.     }, {
    
18.         path: 'ddd',
    
19.         name: 'ddd',
    
20.         component: ddd
    
21.     }, {
    
22.         path: 'eee',
    
23.         name: 'eee',
    
24.         component: eee
    
25.     }, {
    
26.         path: 'fff',
    
27.         name: 'fff',
    
28.         component: fff
    
29.     }],
    
30. },

复制代码

vue路由元信息meta


路由元信息

定义路由的时候可以配置meta字段。
那么我们可以利用meta字段来做什么呢？

设置title

1.     name: 'category',
   
2.     component: () => import('./view/creatBrainStorm/creat/category'),
   
3.     meta: {
   
4.       title: '卓脑'
   
5.     }

复制代码

我们可以在钩子函数router.beforeEach中获取meta中的title数据，并设置为页面标题。

1. router.beforeEach((to, from, next) => {
   
2.   const title = to.meta && to.meta.title
   
3.   if (title) {
   
4.     document.title = title
   
5.   }
   
6. }

复制代码

权限校验（例：登录校验）

1. {
   
2.     name: 'cart',
   
3.     component: () => import('./view/cart'),
   
4.     meta: {
   
5.       title: '购物车',
   
6.       requireAuth: true // 当有这个字段的时候,我们就认为这个路由页面是要有登录权限的
   
7.     }
   
8.   }

复制代码

检查meta中元字段：

1. if (to.meta.requireAuth) {
   
2.     // 不直接通过本地缓存进行判断,而是通过Vuex的属性状态进行判断
   
3.     if (store.state.user.token) {
   
4.       next()
   
5.     } else {
   
6.       next({
   
7.         path: '/login',
   
8.         query: { redirect: to.fullPath }
   
9.       })
   
10.     }
    
11.   } else {
    
12.     next()
    
13.   }

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/284550v1y.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！