vue的路由动画切换页面无法读取meta值的bug记录
作者：Amelia Pond
这篇文章主要介绍了vue的路由动画切换页面无法读取meta值的bug记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue路由动画切换页面无法读取meta值的bug
在vue项目的二级路由中，想要通过设置路由表中的meta值，来判断页面的slide-left 和slide-right的方向。
对于从左到右的排列，给routes依次设为1,2,3,4…的值，使其可以通过大小来判断from和to，并显示出不同的划入 / 划出效果
{
path: 'aaa',
name: 'aaa',
component: aaa,
meta:1
},
{
path: 'bbb',
name: 'bbb',
component: bbb,
redirect:'bbb/baba',
meta:2,
children: [
{
path: 'baba',
name: 'baba',
component: baba
}, {
path: 'ccc',
name: 'ccc',
component: ccc
}, {
path: 'ddd',
name: 'ddd',
component: ddd
}, {
path: 'eee',
name: 'eee',
component: eee
}, {
path: 'fff',
name: 'fff',
component: fff
}],
},
{
path: 'ggg',
name: 'ggg',
meta:4,
component: ggg
},
{
path: 'hhh',
name: 'hhh',
meta:3,
component: hhh
},然鹅，
在设置的过程中，其中一个路由始终无法读到all这个路由中的meta：2
导致切换路由的动画效果出了问题
问题原因
读不到的meta的是因为设置了子路由以及重定向。
解决方法
把meta值加在它的子路由上，
{
path: 'bbb',
name: 'bbb',
component: bbb,
redirect:'bbb/baba',
//meta:2,
children: [
{
path: 'baba',
name: 'baba',
component: baba,
meta:2
}, {
path: 'ccc',
name: 'ccc',
component: ccc
}, {
path: 'ddd',
name: 'ddd',
component: ddd
}, {
path: 'eee',
name: 'eee',
component: eee
}, {
path: 'fff',
name: 'fff',
component: fff
}],
},vue路由元信息meta
路由元信息
定义路由的时候可以配置meta字段。
那么我们可以利用meta字段来做什么呢？
设置title
name: 'category',
component: () => import('./view/creatBrainStorm/creat/category'),
meta: {
title: '卓脑'
}我们可以在钩子函数router.beforeEach中获取meta中的title数据，并设置为页面标题。
router.beforeEach((to, from, next) => {
const title = to.meta && to.meta.title
if (title) {
document.title = title
}
}权限校验（例：登录校验）
{
name: 'cart',
component: () => import('./view/cart'),
meta: {
title: '购物车',
requireAuth: true // 当有这个字段的时候,我们就认为这个路由页面是要有登录权限的
}
}检查meta中元字段：
if (to.meta.requireAuth) {
// 不直接通过本地缓存进行判断,而是通过Vuex的属性状态进行判断
if (store.state.user.token) {
next()
} else {
next({
path: '/login',
query: { redirect: to.fullPath }
})
}
} else {
next()
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。