vue + router + vant + navbar组件封装

本项目选择vuecli3+vant进行移动端页面开发。
本文是针对导航栏进行的简单封装

1、在main.js中导入NavBar

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

2、创建NavBar组件用来封装vant提供的

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

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

 
 
3、在父组件中使用该导航栏作为公共部分并赋值
 
 
  

          
 
 
3.1引用导航栏组件
 
 
import NavBar from "./components/Common/NavBar.vue";
export default {
  components: {
    NavBar
  },
 
 
3.2设置属性值与导航栏组件进行数据绑定（title:'', isleftarrow:''）
 
 
  data() {
    return {
      title:'',
      isleftarrow:'',
      transitionName: "fade",
      navShow: true
    };
  },
 
 
3.3在mounted中给 title和isleftarrow赋值
 
 
:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
 
 
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;       
  },
 
 
3.4使用watch检测路由切换给 title和isleftarrow赋值。
 
 
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.isleftarrow =  to.meta.isleftarrow;
     }
  }
 
 
4、在router.js中设置meta（在3.3和3.4的取值使用）
 
 
routes: [
{
  path: '/apply',
  name: 'apply',
  meta: { title: '导航标题1', isleftarrow:true  },
  component: Apply
},
{
  path: '/',
  name: 'exhibition',
  meta: { title: '导航标题2', isleftarrow:false },
  component: Exhibition
}
]