Vue自定义部分页面显示导航栏功能
短信预约 -IT技能 免费直播动态提醒
遇到的问题：
最近在用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 {
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导航栏内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
