vue页面切换，标题跟着切换 & 是否显示底部导航

 

 router/index.js【路由添加meta属性，title表示标题，showTab表示是否显示底部导航】

  {
      path: '/index',
      name: 'Index',
      component: Index,
      meta: {
        title: '首页', 
        showTab: true  //tabbar显示
      },
    },

 {
      path: '/dw',
      name: 'DW',
      component: DW,
      meta: {
        title: '带外信息',
        showTab: false  //tabbar隐藏
      }
    },

入口文件 main.js 【配置路由前置】

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = ''
  }
  next()
});

App.vue【使用的vant ui 框架，标签添加判断 “ v-if="this.$route.meta.showTab"”】

<template>
  <div id="app">
    <router-view />
    <van-tabbar
      v-model="active"
      active-color="#109B80"
      inactive-color="#999999"
      route
      v-if="this.$route.meta.showTab"
    >

    <van-tabbar-item to="/index">  <span>首页</span> </van-tabbar-item>

    </van-tabbar>
  </div>
</template>