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"”】

vue