Vue navigation bar is not displayed on a specific page -

Recently wrote vue project encountered some problems, I put the components on the navigation bar app.vue, so that he can show up on each page, but encountered a problem, login and registration pages in the navigation bar is not unreasonable allowed to exist

Solution:

Public content modules can be placed in App.vue
but usually does not require navigation of the login page, then you need to avoid the login page

At this point, you can use keep-alive combined $ route.meta to achieve this function.
Vue keep-alive is a built-in component, the component can be included on hold, or avoiding re-rendering. $ route.meta you can choose to display only the desired page. Modify App.vue, as follows:

<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'// import component 
Export default {
  name: 'App',
  components: {Nav}, // registration component
}
</script>

 Then configure routing parameters inside

export default new Router({
  routes: [
     {
      path: '/',
      name: 'home',
      component: Home,
      meta:{
        keepAlive: to true // navigation bar on the page 
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta:{
        keepAlive: false // navigation bar will not be displayed on the page 
      }
    },
    ]
}]

Thank you ~