1、需求介紹：

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

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

1.2、v-if機(jī)制

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

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

2、增加需求

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

3、解決方案

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

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

3.2、一級(jí)路由（主頁(yè)）中

4、優(yōu)化擴(kuò)展

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

4.1、sessionStorage的清空

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

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

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

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

總結(jié)

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

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