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

 更新时间:2023年05月16日 14:33:39   作者: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()
  }

总结

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

相关文章

  • Vue 事件处理操作实例详解

    Vue 事件处理操作实例详解

    这篇文章主要介绍了Vue 事件处理操作,结合实例形式较为详细的分析了vue.js事件处理相关的事件监听、处理、修饰符等相关概念、用法及操作注意事项,需要的朋友可以参考下
    2019-03-03
  • 一文带你搞懂Vue3的基本语法

    一文带你搞懂Vue3的基本语法

    这篇文章主要给大家详细介绍一下Vue3中的基本语法,文中的示例代码讲解详细,对我们学习Vue3有一定的帮助,感兴趣的小伙伴可以了解一下
    2022-11-11
  • Vue vm.$attrs使用场景详解

    Vue vm.$attrs使用场景详解

    这篇文章主要介绍了vm.$attrs使用场景详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue组件的写法汇总

    vue组件的写法汇总

    组件化是为了方便代码复用,提高开发效率。今天脚本之家小编给大家分享常见的vue组件写法四种,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-04-04
  • 浅谈Vue.js中的v-on(事件处理)

    浅谈Vue.js中的v-on(事件处理)

    本篇文章主要介绍了Vue.js中的v-on(事件处理),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 解决element-ui的el-dialog组件中调用ref无效的问题

    解决element-ui的el-dialog组件中调用ref无效的问题

    这篇文章主要介绍了解决element-ui的el-dialog组件中调用ref无效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • 前端vue中文件下载的三种方式汇总

    前端vue中文件下载的三种方式汇总

    对于Vue中实现一般的下载功能很简单,下面这篇文章主要给大家介绍了关于前端vue中文件下载的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • vue实现页面上传文件夹压缩后传给服务器的操作

    vue实现页面上传文件夹压缩后传给服务器的操作

    这篇文章主要介绍了vue实现页面上传文件夹压缩后传给服务器的操作,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue-rx的初步使用教程

    vue-rx的初步使用教程

    这篇文章主要介绍了vue-rx的初步使用教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue elementUI实现自定义正则规则验证

    vue elementUI实现自定义正则规则验证

    本文主要介绍了vue elementUI实现自定义正则规则验证,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论