Vue設置導航欄為公共模塊並在登錄頁不顯示

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