遇到的问题：
最近在用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
}
}
]
原文地址：https://blog.csdn.net/j_l_sheng/article/details/127174287
查看更多关于【vue】的文章
