vue:动态显示与隐藏底部导航

在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式:

方式一:

       1.路由配置meta: {footShow: true, },

routes: [
    {
      path: '/',
      name: 'home',
      redirect: '/home', // 默认路由添加class
      component: home,
      meta: {
        footShow: true, // true显示,false隐藏
      },
    },

       2.在App.vue页面

方式二:

使用watch监听导航切换

watch: { // 监听路由变化
    $route (to, from) {
      let ThisPage = to.name;
      if (ThisPage === 'home' || ThisPage === 'healthcare' || ThisPage === 'healtharea' || ThisPage === 'personal') {
        this.footShow = true;
      } else {
        this.footShow = false;
      }
    }
  },

 

 

 

你可能感兴趣的:(vue)