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实现动态路由多级嵌套面包屑的思路与方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • vue进行post和get请求实例讲解

    vue进行post和get请求实例讲解

    这篇文章主要介绍了vue进行post和get请求实例讲解,违章围绕post和get请求的相关资料展开详细内容,具有一的的参考价值,需要的小伙伴可以参考一下
    2022-03-03
  • vue项目部署上线遇到的问题及解决方法

    vue项目部署上线遇到的问题及解决方法

    这篇文章主要介绍了vue项目部署上线遇到的问题及解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-06-06
  • 深度了解vue.js中hooks的相关知识

    深度了解vue.js中hooks的相关知识

    这篇文章主要介绍了深度了解vue.js中hooks的相关知识,生命周期钩子提供了一些 方法 ,因此你可以在组件生命周期的不同时刻精确地触发某些操作。当我们将组件实例化时,组件会被创建,反之会被销毁。,需要的朋友可以参考下
    2019-06-06
  • 用Vue-cli搭建的项目中引入css报错的原因分析

    用Vue-cli搭建的项目中引入css报错的原因分析

    本篇文章主要介绍了用Vue-cli搭建的项目中引入css报错的原因分析,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Nuxt3+ElementPlus构建打包部署全过程

    Nuxt3+ElementPlus构建打包部署全过程

    网上大部分关于Nuxt打包部署教程可谓是可以用五花八门来形容,这对于第一次接触的朋友简直是无从下手,这篇文章主要给大家介绍了关于Nuxt3+ElementPlus构建打包部署的相关资料,需要的朋友可以参考下
    2023-01-01
  • Vue中的.vue文件的使用方式

    Vue中的.vue文件的使用方式

    这篇文章主要介绍了Vue中的.vue文件的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue结合leaflet实现克里金插值

    Vue结合leaflet实现克里金插值

    本文主要介绍了Vue结合leaflet实现克里金插值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vue3的ref、isRef、toRef、toRefs、toRaw详细介绍

    vue3的ref、isRef、toRef、toRefs、toRaw详细介绍

    本文详细讲解了vue3的ref、isRef、toRef、toRefs、toRaw,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • vue按住shift键多选方式(以element框架的table为例)

    vue按住shift键多选方式(以element框架的table为例)

    这篇文章主要介绍了vue按住shift键多选方式(以element框架的table为例),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论