vue 路由meta 设置导航隐藏与显示功能的示例代码

vue 路由meta 设置title 导航隐藏，具体代码如下所示：

router.js

routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        title: "HelloWorld",  要现实的title
        show: true        设置导航隐藏显示
      }

    }]

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <bottom v-show="this.$route.meta.show"></bottom>  this.$route.meta.show 显示或隐藏
  </div> 
</template>

main.js

router.beforeEach((to, from, next) => {
 
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})<br><br>监听路由 写入 title

PS：vue 中路由meta

meta字段（元数据）

直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了

{
 path: '/actile',
 name: 'Actile',
 component: Actile,
 meta: {
  login_require: false
 },
},
{
 path: '/goodslist',
 name: 'goodslist',
 component: Goodslist,
 meta: {
  login_require: true
 },
 children:[
  {
   path: 'online',
   component: GoodslistOnline
  }
 ]
}

这里我们只需要判断item下面的meta对象中的login_require是不是true，就可以做一些限制了

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

总结

到此这篇关于vue 路由meta 设置导航隐藏与显示功能的示例代码的文章就介绍到这了,更多相关vue 路由meta 设置导航隐藏与显示内容请搜索呐喊教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持呐喊教程！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

基础教程