Vue导航栏在特定的页面不显示~

Posted 2022-01-08 jialun-online

最近写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//导航栏在该页面不予显示
      
    ,
    ]
]

谢谢~