在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue路由跳轉(zhuǎn)問題

vue路由跳轉(zhuǎn)問題

需求：

希望從主頁跳轉(zhuǎn)到詳情頁的時(shí)候，底部footer隱藏。

我的嘗試：

在詳情頁的mounted里，獲取當(dāng)前路由，如果是詳情頁，就隱藏底部footer。
    (這樣出現(xiàn)了個(gè)問題： 從詳情頁點(diǎn)擊路由跳轉(zhuǎn)到首頁之后底部不出現(xiàn)了(因?yàn)閺氖醉摰皆斍轫揻ooter只渲染了一次))

目前是vue-cli起的項(xiàng)目，有vue-router。

求解。(希望每次路由跳轉(zhuǎn)都判斷是不是詳情頁，如果是的話，就隱藏底部)

回答
編輯回答
陪妳哭

1、利用路由元：meta ，加多一個(gè) isShowBottomTab 的屬性。
clipboard.png

{
      path: '/index',
      name: 'index',
      component: index,
      meta: {
        isShowBottomTab: true,
        keepAlive: true, //此組件需要被緩存
        isBack: false, //用于判斷上一個(gè)頁面是哪個(gè)
      }
    },

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

clipboard.png

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

clipboard.png

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

4、然后在footer里面利用 v-show="isShowBottomTab" 就可以自動(dòng)顯示與隱藏footer
clipboard.png

2017年10月27日 17:42
編輯回答
執(zhí)念

clipboard.png

獲取了對象 你就可以操作這個(gè)對象的內(nèi)容了

2017年11月14日 07:32
編輯回答
何蘇葉

beforeRouteEnter

2017年1月8日 00:11
編輯回答
陪妳哭

你可以
圖片描述
在主頁的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組件了啊

2018年2月24日 09:18
編輯回答
卟乖

可以再詳情組件中試用beforeRouteEnter鉤子函數(shù)，

beforeRouteEnter(to, from, next) {
    修改狀態(tài) 控制footer 組件顯示隱藏
}
也可以在main.js中使用Router.beforeEach(to, from, next) {
    判斷to.path 是否為詳情頁，修改狀態(tài)，控制footer組件顯示影藏
    
    next() 注意調(diào)用next方法
}

<footer v-if="$store.state.blFooter"><footer>
2018年9月1日 11:09