Vue设置导航栏为公共模块并在登录页不显示

Vue设置导航栏为公共模块并在登录页不显示

2019-01-25 19:22:00 weixin_30813225 阅读数 99  收藏

原文链接：http://www.cnblogs.com/Kyaya/p/10321285.html

1.公共模块的内容可以放在App.vue中
但是通常登录页面是不需要导航的，那么就需要规避登录页
这时，就可以采用keep-alive结合$route.meta来实现这个功能。
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。$route.meta则可以选择让需要的页面才展示。修改App.vue，如下：

1. <template>

2. <div id="app">

3. <div v-if="$route.meta.keepAlive">

4. <head-nav></head-nav>

5. <router-view></router-view>

6. </div>

7. <router-view v-if="!$route.meta.keepAlive"></router-view>

8. </div>

9. </template>

10.  

11. <script>

12. import HeadNav from './components/HeadNav'

13. export default {

14. name: 'App',

15. components:{HeadNav},

16. }

17. </script>

 

 2.修改index.js代码

import Vue from 'vue'

import Router from 'vue-router'

import Login from '@/components/Login'

import Qylist from '@/components/Qylist'


Vue.use(Router)


export default new Router({

routes: [

{

path: '/',
name: 'Login',
component: Login,
meta: {
keepAlive: false
}
},
{
path: '/project',
name: Qylist,
component: Qylist,
meta: {
keepAlive: true
}
}
]
})