vue 路由meta 设置导航隐藏与显示功能的示例代码
更新时间：2020年09月04日 09:31:04 作者：谷歌研发技术团队
这篇文章主要介绍了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 设置导航隐藏与显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了Django Vue实现动态菜单和动态权限，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
本文主要介绍了vue动态修改页面title的两种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要为大家介绍了Vue父子组件元素获取方法互相调用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
本文会通过一个简单的vue-toast插件，来帮助了解掌握插件的开发和使用。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
如何解决d3.event在v7版本无效影响zoom拖拽缩放问题
这篇文章主要介绍了如何解决d3.event在v7版本无效影响zoom拖拽缩放问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
插槽（Slot）是Vue.js中一个非常重要的概念,它极大地提高了组件的复用性和灵活性,通过插槽,我们可以自定义组件的内容,使其能够适应不同的场景,本文将结合实际案例,详细介绍Vue中插槽的基本用法、类型以及高级技巧,需要的朋友可以参考下2024-11-11
在 Vue 项目中如何引用 assets 文件夹中的图片(方式汇总)
Vue中引用assets文件夹中的图片有多种方式,在.vue文件的模板部分,使用相对路径或通过@别名引用图片,在CSS中,通过相对路径或@别名引用图片作为背景,在JavaScript中,通过import语句导入图片资源,并使用v-bind在模板中绑定显示,这些方法均可有效管理和引用项目中的图片资源2024-09-09
这篇文章主要给大家分享的是Vue3的几个优势，Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化，下面我们一起进入文章看看具体详情吧2021-10-10
详解vuex中action何时完成以及如何正确调用dispatch的思考
这篇文章主要介绍了详解vuex中action何时完成以及如何正确调用dispatch的思考，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue请求函数和路由的安装使用过程,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
最新评论