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

Posted 2021-02-05 kyaya

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
      	}
	}
	
  ]
})