(编辑:jimmy 日期: 2024/12/24 浏览:2)
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() })
总结