1、需求介绍：

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

1.1、相关路由：

1.2、v-if机制

1.3、实现结果

左上方设备列表按钮为返回主页。

2、增加需求

当用户处于子模块时，比如设备状态，刷新浏览器后，仍处于子模块页面下。
难点分析：子模块使用的时v-if机制，子模块所属的模块（所有子模块加起来）是一个二级路由，此二级路由是一级路由（主页）的子路由。
问题分析：在子模块下刷新浏览器，会默认跳转到一级路由，也就是会跳转到主页（设备列表），如何才能跳转回子模块，并且保持参数传递正常？
子模块下的url如下：

3、解决方案

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

3.1、二级路由（设备信息主页）中

3.2、一级路由（主页）中

4、优化扩展

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

4.1、sessionStorage的清空

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

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

假设一个用户从主页点击进入了二级路由（设备信息主页），点击了二级路由中的子模块，然后点击浏览器自带的返回按钮返回了主页，此时再刷新浏览器，理应刷新浏览器后留在主页，但是由于sessionStorage还在，所以仍会返回子模块，跟4.1中的情况类似，但由于4.1中返回按钮为自定义，可以在响应函数中调用清空方法。
那么浏览器自带的返回应该如何解决？以下为本人写于App.vue中的方法，给点击浏览器自带的返回时触发的事件添加监听函数即可。

至此，Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案分享完毕。
预祝各位周末愉快O(∩_∩)O~