Vue導航欄在特定的頁面不顯示~

最近寫vue項目遇到一些問題,我把導航欄組件放在了app.vue中,讓他在每個頁面都能顯示了,但遇到了一個問題,在登錄以及注冊頁面導航欄是不合理不允許存在的

解決方法:

公共模塊的內容可以放在App.vue中
但是通常登錄頁面是不需要導航的，那么就需要規避登錄頁

這時，就可以采用keep-alive結合$route.meta來實現這個功能。
keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。$route.meta則可以選擇讓需要的頁面才展示。修改App.vue，如下：

<template>
  <div id="app">
        <div v-if="$route.meta.keepAlive">

　　　　　　<Nav/>

　　　　　　<router-view/>

        </div>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
 
<script>
import Nav './components/Nav'//導入組件
export default {
  name: 'App',
  components:{Nav},//注冊組件
}
</script>

 然后配置路由里面的參數

export default new Router({
  routes: [
     {
      path: '/',
      name: 'home',
      component: Home,
      meta:{
        keepAlive:true//導航欄在該頁面顯示
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta:{
        keepAlive:false//導航欄在該頁面不予顯示
      }
    },
    ]
}]

謝謝~