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

第一种 使用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')
  }
]

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐