Vue自定义部分页面显示导航栏功能_vue.js_

遇到的问题：

最近在用Vue+elementUI开发一个网站的前端，网站的逻辑是没有账号的用户先注册，有账号的用户直接登录，登录后才能进入网站的主页。在设计导航栏的时候，考虑到登录之前不能浏览该网站，所以需要在登录页和注册页不能出现导航栏，登录后的页面才能出现导航栏。
总结一下：
具体的需求就是有的页面显示导航栏，有的不显示，即自定义显示导航栏的页面。

解决方法：

1.先创建一个放导航栏代码的Header.vue

2.然后在APP.vue里导入这个导航
在APP.vue中引入Header.vue，然后用route.meta.keepAlive来控制是否显示头部导航栏

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导航栏内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！