Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案

时间:2024-04-04 16:36:25

1、需求介绍:

以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态、设备日志、固件升级,会切换下方内容。
本人对以上需求实现方案:设备列表为一级路由,设备信息主页为二级路由,设备配置、设备状态、设备日志、固件升级在设备信息主页中使用v-if机制切换。

1.1、相关路由:

Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案

1.2、v-if机制

Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案

1.3、实现结果

Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
左上方设备列表按钮为返回主页。

2、增加需求

当用户处于子模块时,比如设备状态,刷新浏览器后,仍处于子模块页面下。
难点分析:子模块使用的时v-if机制,子模块所属的模块(所有子模块加起来)是一个二级路由,此二级路由是一级路由(主页)的子路由。
问题分析:在子模块下刷新浏览器,会默认跳转到一级路由,也就是会跳转到主页(设备列表),如何才能跳转回子模块,并且保持参数传递正常?
子模块下的url如下:
Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案

3、解决方案

使用sessionStorage保存二级路由的active子模块,保存在一个字段中,比如location,此外需要获取子模块中的参数。在一级路由(主页)中进行检测,检测到sessionStorage的话,读取当中的信息,push到url中,实现跳转。

3.1、二级路由(设备信息主页)中

Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案

3.2、一级路由(主页)中

Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案

4、优化扩展

至此,进入子模块后,刷新浏览器,仍会跳转至当前子模块(具体写法请根据自己的项目路由及v-if机制情况)。

4.1、sessionStorage的清空

点击左上方的设备列表按钮,返回主页后,理应刷新浏览器后留在主页,但是由于sessionStorage还在,所以仍会返回子模块,解决方法:点击按钮返回设备列表时,清空sessionStorage中的location字段即可,如:sessionStorage.setItem('location', '')

4.2、浏览器自带返回的处理

假设一个用户从主页点击进入了二级路由(设备信息主页),点击了二级路由中的子模块,然后点击浏览器自带的返回按钮返回了主页,此时再刷新浏览器,理应刷新浏览器后留在主页,但是由于sessionStorage还在,所以仍会返回子模块,跟4.1中的情况类似,但由于4.1中返回按钮为自定义,可以在响应函数中调用清空方法。
那么浏览器自带的返回应该如何解决?以下为本人写于App.vue中的方法,给点击浏览器自带的返回时触发的事件添加监听函数即可。
Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
至此,Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案分享完毕。
预祝各位周末愉快O(∩_∩)O~