鍍金池/ 問答/HTML/ vue路由跳轉(zhuǎn)能保存原頁面嗎

vue路由跳轉(zhuǎn)能保存原頁面嗎

在用vue模仿網(wǎng)易云音樂App時發(fā)現(xiàn)個問題：

clipboard.png

這個頁面的左上角的按鈕是個人信息欄的現(xiàn)隱按鈕，點擊之后的效果如下

clipboard.png

可以看到原頁面的內(nèi)容雖然加了遮罩，但都是可以看到的。

問題就是：

我現(xiàn)在是寫成父子組件通訊，實現(xiàn)子組件的現(xiàn)隱，但這就有個問題就是，瀏覽器返回就無法控制子組件的現(xiàn)隱；  
而我也之前嘗試過子組件的現(xiàn)隱通過路由來控制，但是頁面的跳轉(zhuǎn)無法保留原頁面內(nèi)容（圖2的紅框部分）。
所以有什么方法可以實現(xiàn)，既可以保留原頁面內(nèi)容又可以通過路由返回控制子組件。
回答
編輯回答
乖乖噠

keep-alive?

2017年2月21日 09:25
編輯回答
互擼娃

Router 在定義的時候，是否以 tree 的形式進行拓撲？
根組件由多個 router-view，menu、topbar、content 分別放在不同的 router-view 中，在 root 組件中控制 menu 的返回和跳轉(zhuǎn)，就可以實現(xiàn) route 來控制每個狀態(tài)了。

2018年3月17日 15:47
編輯回答
薄荷糖

不要用組件，用子路由。

  1. 準備工作， 假設(shè)你第一張圖的頁面是 /main ，在他的 children 里設(shè)置兩個子路由頁面
    1.1. /main/sideBar 頁面內(nèi)容就是你第二張圖的側(cè)邊欄
    1.2. /main/main 一個空頁面，寬高為0，背景透明
  2. 在 /main 主頁添加 <router-view></router-view>
  3. 需要顯示的時候，判斷當前路由，需要顯示時$router.push({ path: '/main/sideBar' }),不顯示時，$router.push({ path: '/main/main' })
  4. 在這種情況下，通過前進后退可以控制顯隱。

個人建議: 按正常的交互，應(yīng)該是后退,前進 可隱藏但顯示，需要這種效果可以用$router.replace({ path: '/main/main' }),將隱藏頁面替換掉顯示頁面

2018年5月8日 20:12
編輯回答
尋仙

寫成公用組件，顯示隱藏狀態(tài)通過vuex統(tǒng)一控制。

2017年7月17日 14:07