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，如下：

<template>
<div id="app">
<div v-if="$route.meta.keepAlive">
<head-nav></head-nav>
<router-view></router-view>
</div>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
import HeadNav from './components/HeadNav'
export default {
name: 'App',
components:{HeadNav},
}
</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
}
}
]
})