微客导航 » 文章资讯 » vue 路由meta 设置导航隐藏与显示功能的示例代码

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

2023-07-17 06:07:03 325

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

router.js

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

}]

App.vue

main.js

router.beforeEach((to,from,next)=>{

if(to.meta.title){
document.title=to.meta.title
}
next()
})

监听路由写入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){
returnitem.meta.login_require
})){
next('/login')
}else
next()
})

总结

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐