首先我们创建一个公共部分的组件
<van-nav-bar
:v-if="show"
:title="title"
:left-text="goBack ? '返回' : null"
:left-arrow="goBack"
@click-left="onClickLeft"
@click-right="onClickRight"
/>
我这边是引用的vant的导航部分
然后我们在App.vue部分引入
<template>
<div id="app">
<div v-if="$route.meta.navBar">
<myHeader />
</div>
<router-view />
</div>
</template>
<script>
import myHeader from "@views/components/header.vue";
export default {
name: "App",
components: {
myHeader
}
};
</script>
我们可以在路由meta部分添加任意变量，通过该变量来控制导航部分的显示
路由表
{
path: '/login',
name: 'login',
component: () => import('@views/login/login.vue'),
meta: {
title: '登录',
show:false,
navBar:false
}
},
{
path: '/',
name: 'Home',
component: () => import('@views/home.vue'),
meta: {
title: '首页',
show:false,
navBar:true
}
},
