1、需求介紹：

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

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

1.2、v-if機(jī)制

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

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

2、增加需求

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

3、解決方案

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

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

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

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

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

4.1、sessionStorage的清空

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

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

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

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

總結(jié)

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

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