我的名字叫馆陶 发表于 2023-5-17 09:36:40

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()
  }
总结

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

来源:https://www.jb51.net/javascript/284550v1y.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: vue的路由动画切换页面无法读取meta值的bug记录