vue路由跳转问题

Question

需求：

希望从主页跳转到详情页的时候，底部footer隐藏。

我的尝试：

在详情页的mounted里，获取当前路由，如果是详情页，就隐藏底部footer。
    (这样出现了个问题： 从详情页点击路由跳转到首页之后底部不出现了(因为从首页到详情页footer只渲染了一次))
    

目前是vue-cli起的项目，有vue-router。

求解。(希望每次路由跳转都判断是不是详情页，如果是的话，就隐藏底部)

Answer 1

可以再详情组件中试用beforeRouteEnter钩子函数，

beforeRouteEnter(to, from, next) {
    修改状态 控制footer 组件显示隐藏
}

也可以在main.js中使用Router.beforeEach(to, from, next) {
    判断to.path 是否为详情页，修改状态，控制footer组件显示影藏
    
    next() 注意调用next方法
}

<footer v-if="$store.state.blFooter"><footer>

Answer 2

beforeRouteEnter

Answer 3

获取了对象 你就可以操作这个对象的内容了

Answer 4

你可以

在主页的index.vue引入你的页脚组件啊

<template>
<div>
  <nav-bar></nav-bar>
  <div class="main-box">
    <help-nav></help-nav>
    <div class="main" style="width:87.9%;padding:25px;overflow-y:scroll;min-height:800px;">
      <div class="help-title">
          <p><span></span>帮助文档</p>
      </div>
      <router-view/>
    </div>
  </div>
  <pub-footer></pub-footer>
</div>
</template>

详情页的话就不要引用footer组件了啊

Answer 5

1、利用路由元：meta ，加多一个 isShowBottomTab 的属性。

{
      path: '/index',
      name: 'index',
      component: index,
      meta: {
        isShowBottomTab: true,
        keepAlive: true, //此组件需要被缓存
        isBack: false, //用于判断上一个页面是哪个
      }
    },

2、然后在路由全局守卫勾子：beforeEach ，把它存在vuex，也就是 store 里面，以便全局可用。

router.beforeEach((to, from, next) => {
  let { isShowBottomTab = false } = to.meta;
  // document.title = title
  store.commit('SET_PAGE_STATE_ROOT', {
    isShowBottomTab
  });

  next();
});

3、在footer的tab组件里面利用 computed 来获取store里面的 isShowBottomTab

computed: {
        isShowBottomTab() {
            return this.$store.state.isShowBottomTab;
        },
    },

4、然后在footer里面利用 v-show="isShowBottomTab" 就可以自动显示与隐藏footer