1、需求介紹：

以下介紹一下實現(xiàn)起來沒什么疑問的需求：設(shè)備列表為一個主頁，點擊設(shè)備列表中的編輯按鈕，進入設(shè)備信息主頁面，默認打開設(shè)備配置頁，點擊設(shè)備狀態(tài)、設(shè)備日志、固件升級，會切換下方內(nèi)容。
本人對以上需求實現(xiàn)方案：設(shè)備列表為一級路由，設(shè)備信息主頁為二級路由，設(shè)備配置、設(shè)備狀態(tài)、設(shè)備日志、固件升級在設(shè)備信息主頁中使用v-if機制切換。

1.1、相關(guān)路由：

1.2、v-if機制

1.3、實現(xiàn)結(jié)果

左上方設(shè)備列表按鈕為返回主頁。

2、增加需求

當用戶處于子模塊時，比如設(shè)備狀態(tài)，刷新瀏覽器后，仍處于子模塊頁面下。
難點分析：子模塊使用的時v-if機制，子模塊所屬的模塊（所有子模塊加起來）是一個二級路由，此二級路由是一級路由（主頁）的子路由。
問題分析：在子模塊下刷新瀏覽器，會默認跳轉(zhuǎn)到一級路由，也就是會跳轉(zhuǎn)到主頁（設(shè)備列表），如何才能跳轉(zhuǎn)回子模塊，并且保持參數(shù)傳遞正常？
子模塊下的url如下：

3、解決方案

使用sessionStorage保存二級路由的active子模塊，保存在一個字段中，比如location，此外需要獲取子模塊中的參數(shù)。在一級路由（主頁）中進行檢測，檢測到sessionStorage的話，讀取當中的信息，push到url中，實現(xiàn)跳轉(zhuǎn)。

3.1、二級路由（設(shè)備信息主頁）中

3.2、一級路由（主頁）中

4、優(yōu)化擴展

至此，進入子模塊后，刷新瀏覽器，仍會跳轉(zhuǎn)至當前子模塊（具體寫法請根據(jù)自己的項目路由及v-if機制情況）。

4.1、sessionStorage的清空

點擊左上方的設(shè)備列表按鈕，返回主頁后，理應(yīng)刷新瀏覽器后留在主頁，但是由于sessionStorage還在，所以仍會返回子模塊，解決方法：點擊按鈕返回設(shè)備列表時，清空sessionStorage中的location字段即可，如：sessionStorage.setItem('location', '')

4.2、瀏覽器自帶返回的處理

假設(shè)一個用戶從主頁點擊進入了二級路由（設(shè)備信息主頁），點擊了二級路由中的子模塊，然后點擊瀏覽器自帶的返回按鈕返回了主頁，此時再刷新瀏覽器，理應(yīng)刷新瀏覽器后留在主頁，但是由于sessionStorage還在，所以仍會返回子模塊，跟4.1中的情況類似，但由于4.1中返回按鈕為自定義，可以在響應(yīng)函數(shù)中調(diào)用清空方法。
那么瀏覽器自帶的返回應(yīng)該如何解決？以下為本人寫于App.vue中的方法，給點擊瀏覽器自帶的返回時觸發(fā)的事件添加監(jiān)聽函數(shù)即可。

至此，Vue.JS項目中二級路由下刷新瀏覽器仍呈現(xiàn)當前路由的實現(xiàn)方案分享完畢。
預(yù)祝各位周末愉快O(∩_∩)O~

總結(jié)

以上是生活随笔為你收集整理的Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。