vue 路由meta 设置title 导航隐藏

Posted 赵理通

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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()
})

监听路由 写入 title

  

 

以上是关于vue 路由meta 设置title 导航隐藏的主要内容,如果未能解决你的问题,请参考以下文章

vue 如何设置在一级页面有底部导航 进入二级页面隐藏

Vue路由配置是否含底部导航栏

vue设置路由title,实现在vue路由发生变化的时候,相应的页面title随之变化

vue路由跳转时更改页面title

Vue项目中使用 路由导航守卫 处理页面的访问权限

vue动态给网站每个页面添加title 关键词 描述方法