文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中的路由配置项meta如何使用

2023-07-04 10:25

关注

这篇文章主要介绍了Vue中的路由配置项meta如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中的路由配置项meta如何使用文章都会有所收获,下面我们一起来看看吧。

Vue路由配置项meta使用

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

这里简单的举两个例子

Vue中的路由配置项meta如何使用

Vue中的路由配置项meta如何使用

Vue中的路由配置项meta如何使用

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

Vue中的路由配置项meta如何使用

Vue中的路由配置项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中的路由配置项meta如何使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue中的路由配置项meta如何使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯