Posted in Javascript onSeptember 04, 2020
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 设置导航隐藏与显示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!
vue 路由meta 设置导航隐藏与显示功能的示例代码
- Author -
谷歌研发技术团队声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@