vue路由跳转的时候隐藏或去掉导航栏或者菜单栏
我们在用路由跳转的时候发现,并不是每一个跳转页面都是有导航栏的,就比如,跳转登录页面的时候,底部的导航栏就会消失,以下提供两个能让导航栏消失的方法第一种使用v-show1.给导航栏加上v-show的判断条件,$route可以获取meta中的信息,istrun是我们在路由中添加的一个变量(用来判断v-show成立的条件)<template><div id="app"&...
·
我们在用路由跳转的时候发现,并不是每一个跳转页面都是有导航栏的,就比如,跳转登录页面的时候,底部的导航栏就会消失,以下提供两个能让导航栏消失的方法
第一种 使用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')
}
]
以上是常见的两种实现路由跳转隐藏导航栏或者菜单栏的方法
更多推荐
所有评论(0)