vue路由跳转的时候隐藏或去掉导航栏或者菜单栏

我们在用路由跳转的时候发现，并不是每一个跳转页面都是有导航栏的，就比如，跳转登录页面的时候，底部的导航栏就会消失，以下提供两个能让导航栏消失的方法

第一种 使用v-show
1.给导航栏加上v-show的判断条件，$route可以获取meta中的信息，istrun是我们在路由中添加的一个变量（用来判断v-show成立的条件）

<template>
 <div id="app">
      <router-view/>
   <div>{{$route}}</div>
   <div id="nav" v-show="$route.meta.istrun">  
     <router-link to="/">首页</router-link>|
     <router-link to='/menu'>菜单</router-link>|
     <router-link to='/serve'>服务</router-link>|  
     <router-link to='/my'>我的</router-link>
   </div>
 </div>
</template>

以下是路由中的代码

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      istrun:true
    },
  },
  {
    path: '/menu',
    name: 'About',
    meta:{
      istrun:true
    },
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  },
  {
    path: '/serve',
    name: 'Home',
    component: ()=>import('../views/Home.vue'),
    meta:{
      istrun:true
    },
  },
  {
    path: '/my',
    name: 'Home',
    component: ()=>import('../views/my.vue'),
    meta:{
      istrun:true
    },
  },
  {
    path:"/login",
    name:"login",
    component:()=>import('../views/login.vue')
  }
]

以上我们可以看到，我们在需要显示菜单栏的里面都添加了isturn：true这个条件，那么判断v-show=“$router.meta.isturn”’的时候条件就会为真，就可显示，没有添加，那么获取到值为：undefined，判断为false，不显示。

2.第二种方法，将显示底部菜单栏或者导航的放在一个路由中，不显示的放在一个路由中分开：
首先在主页面中设置渲染的区域：

<template>
  <div id="app">
       <router-view/>
  </div>
</template>

然后把需要显示导航栏的路由单独放置在一个组件中；

<template>
    <div>
      <router-link to="/">首页</router-link>|
      <router-link to='/menu'>菜单</router-link>|
      <router-link to='/serve'>服务</router-link>|  
      <router-link to='/my'>我的</router-link>
    <router-view></router-view>
    </div>
</template>

最后在router中设置路由的详细信息，其中自加载的 my 组件中，里面又写了一个跳转路由 登录。

const routes = [
  {
    // 需要显示导航的跳转路由
    path:'/',
    name:'zhuye',
    // 需要显示的菜单导航的路由，作为该路由的子路由，并且在子路由中设置具体跳转加载的组件
    component:()=>import('../views/zong.vue'),
    children:[{
      path:'/menu',
      component:()=>import('../views/About.vue')
    },
    {
      path:'/serve',
      component:()=>import('../views/serve.vue')
    },
    {
      path:'/my',
      component:()=>import('../views/my.vue')
    },   
  ]
  },
  // 不需要显示导航的路由
  {
    path:'/login',
    component:()=>import('../views/login.vue')
  }
]

以上是常见的两种实现路由跳转隐藏导航栏或者菜单栏的方法