vue底部导航栏点击切换样式（Vue自定义部分页面显示导航栏功能）
导读：遇到的问题： 最近在用Vue+elementUI开发一个网站的前端，网站的逻辑是没有账号的用户先注册，有账号的用户直接登录，登录后才能进入网站的主页。在设计导航栏的时候，考虑到登录之前不能浏览该网站，所以需要在登录页和注册页不能出现导航栏，登录后的页面才能出现导航栏。...
遇到的问题：
最近在用Vue+elementUI开发一个网站的前端 ，网站的逻辑是没有账号的用户先注册 ，有账号的用户直接登录 ，登录后才能进入网站的主页 。在设计导航栏的时候 ，考虑到登录之前不能浏览该网站 ，所以需要在登录页和注册页不能出现导航栏 ，登录后的页面才能出现导航栏 。
总结一下：具体的需求就是有的页面显示导航栏 ，有的不显示 ，即自定义显示导航栏的页面 。解决方法：
1.先创建一个放导航栏代码的Header.vue
<template>
<div>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
<el-menu-item index="1">
<router-link to="/homepage">
<span>首页</span>
</router-link>
</el-menu-item>
<el-menu-item index="2">
<router-link to="/composevideo">
<span>合成视频</span>
</router-link>
</el-menu-item>
<el-menu-item index="3" disabled>
<router-link to="/">
<span>视频圈</span>
</router-link>
</el-menu-item>
<el-menu-item index="4">
<router-link to="/useguide">
<span>使用指南</span>
</router-link>
</el-menu-item>
<el-menu-item index="5">
<router-link to="/personalcenter">
<span>个人中心</span>
</router-link>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Header"
}
</script>
<style scoped>
/*由a来控制router-link*/
a {
text-decoration: none;
color: #000000;
font-family: sans-serif;
font-size: 14px;
}
</style>
2.然后在APP.vue里导入这个导航
在APP.vue中引入Header.vue ，然后用route.meta.keepAlive来控制是否显示头部导航栏
<template>
<div id="app">
<div v-if="$route.meta.keepAlive">
<header-nav></header-nav>
<router-view></router-view>
</div>
<div v-if="!$route.meta.keepAlive">
<router-view></router-view>
</div>
</div>
</template>
<script>
import header from @/views/Header;
export default{
components: {
headerNav: header,
}
}
</script>
3.修改router/下的index.js
在之前的index.js中新增meta属性 ，为keepAlive赋值 ，需要显示头部导航的赋值为true ，不需要的为false 。
部分代码如下：
const routes = [
{
path: /,
name: Login,
component: Login,
meta:{
keepAlive: false
}
},
{
path: /register,
name: Register,
component: Register,
meta:{
keepAlive: false
}
},
{
path: /homepage,
name: Homepage,
component: Homepage,
meta:{
keepAlive: true
}
}
]
到此这篇关于Vue自定义部分页面显示导航栏的文章就介绍到这了,更多相关Vue导航栏内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！