Vue中的路由配置项meta使用解析

 更新时间:2022年10月22日 15:21:09   作者:Are杨  
这篇文章主要介绍了Vue中的路由配置项meta使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue路由配置项meta使用

meta简单来说就是路由元信息 也就是每个路由身上携带的信息。

这里简单的举两个例子

其次还有一个功能就是能够控制公共组件的显示或隐藏

请忽视 keep-alive标签

Vue路由中的meta问题

我们经常会在进入一个页面时判断是否已经登陆,经常会用到路由导航守卫router.beforeEach(to, from, next), 一个两个页面还好,但是多的话,就会麻烦,并且路由还会嵌套。这时可以使用meta。

meta (元数据)

在配置路由时,经常会用到path,name,component,还有一个就是meta 元数据,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。经常用它来做登录校验。

{
      path: '/imgMove/:id',
      name: 'imgMove',
      meta: {
        requiresAuth: true
      },
      component: imgMove
    },
    { //作品页面
      path: '/work',
      name: 'work',
      meta: {
        canNotLogin: true
      },
      component: work
    },

我们需要校验判断item下面的meta对象的requiresAuth是不是true,就可以进行一些限制。

router.beforeEach((to, from, next) => {
  if (to.matched.some(function (item) {
    return item.requiresAuth
  })) {
    next('/login')
  } else 
    next()
})

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

相关文章

  • vue项目引入字体.ttf的方法

    vue项目引入字体.ttf的方法

    今天小编就为大家分享一篇vue项目引入字体.ttf的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue项目如何引入element ui、iview和echarts

    vue项目如何引入element ui、iview和echarts

    这篇文章主要介绍了vue项目如何引入element ui、iview和echarts,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue倒计时3秒后返回首页Demo(推荐)

    Vue倒计时3秒后返回首页Demo(推荐)

    这篇文章主要介绍了Vue倒计时3秒后返回首页Demo,倒计时结束后要清除计时器,防止内存泄漏,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-11-11
  • Vue3 PC端页面开发规范及说明

    Vue3 PC端页面开发规范及说明

    这篇文章主要介绍了Vue3 PC端页面开发规范及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 前端Vue中常用rules校验规则详解

    前端Vue中常用rules校验规则详解

    这篇文章主要介绍了前端Vue中常用rules校验规则详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • vue-cli 2.*中导入公共less文件的方法步骤

    vue-cli 2.*中导入公共less文件的方法步骤

    这篇文章主要介绍了vue-cli 2.*中导入公共less文件的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 快速解决element的autofocus失效问题

    快速解决element的autofocus失效问题

    这篇文章主要介绍了快速解决element的autofocus失效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码

    Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码

    本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单,对Vue3 无限级菜单组件相关知识感兴趣的朋友一起看看吧
    2022-09-09
  • vue-router history模式下的微信分享小结

    vue-router history模式下的微信分享小结

    本篇文章主要介绍了vue-router history模式下的微信分享小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue el-date-picker 日期回显后无法改变问题解决

    vue el-date-picker 日期回显后无法改变问题解决

    这篇文章主要介绍了vue el-date-picker 日期回显后无法改变问题解决,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04

最新评论