1. 按照vant组件库，首先导入NavBar

• 全局引入

import Vue from 'vue';
import { NavBar } from 'vant';
Vue.use(NavBar);

• 按需引入

import { NavBar } from "vant";
export default {
  components: {
    [NavBar.name]: NavBar,
  },
}

2. 创建NavBar组件用来封装vant提供的van-nav-bar

2.1 设置数据绑定的title以及左侧返回箭头是否显示

 <template>
  <div id="NavBar">
    <van-nav-bar :title="title" :left-arrow="left" @click-left="onClickLeft" />
  </div>
</template>

2.2 父组件使用props给子组件传值，父组件动态给导航栏赋值

<script>
export default {
  props: ["title","left"],
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

3. 在父组件中使用该导航栏并赋值

<NavBar v-show="navShow" :title="title" :left="left></NavBar>

3.1 引用导航栏组件

import NavBar from "../../components/NavBar.vue";
export default {
  components: {
     NavBar: NavBar
  },

3.2 设置属性值与导航栏组件进行数据绑定

data() {
    return {
      title:'',
      left:'',
    };
  },

3.3在mounted中给 title和left进行赋值

 mounted() {
    this.title = this.$route.meta.title;
    this.left = this.$route.meta.left;       
  },

4. 在router.js中设置meta

let routers=[
  {
    path: '/one',
    name: 'one',
    meta: {
      title: '一',
      left:true 
    },
    component: () => import('../pages/one.vue'),
  },
  {
    path: "/two",
    name: 'two',
    meta: {
      title: '二',
      left:true 
    },
    component: () => import('../pages/two.vue')
  }
]