How to display the navigation bar on some pages and not on some pages

How to display the navigation bar on some pages and not on some pages

You can judge which pages need a navigation bar and which pages do not need a navigation bar through the routing meta tags.

In APP.vue:

<template>
  <div id="app">
    <div v-if="$route.meta.keepAlive">			//需要导航栏的页面
        <navTop></navTop>
        <router-view></router-view>
    </div>
    <div v-if="!$route.meta.keepAlive">			//不需要导航栏的页面
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
import navTop from '@/components/common/nav.vue';
export default {
    
    
  name:"commonNav",
  components:{
    
    
     navTop
  }
}
</script>

In router.js:

{
    
    
      path: '/login',
      name: "Login",
      component: Login,
      meta: {
    
    
        keepAlive: true			//keepAlive这个字段是可以随意更改的
      }
},

In this way, the navigation bar will only be displayed on the page where you set the keepAlive property value to true.

Guess you like

Origin blog.csdn.net/qq_58648235/article/details/129789878