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

转载 2018年04月16日 15:36:37

原本链接:https://blog.csdn.net/fabulous1111/article/details/79933776

原文作者:GuoQiangXie

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项目中二级路由下刷新浏览器仍呈现当前路由的实现方案分享完毕。

vue 刷新当前路由

1.路由介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起...
  • mnhn456
  • mnhn456
  • 2017-12-09 13:50:59
  • 1566

用vue-router实现二级菜单内容的转换

用vue-router实现二级菜单内容的转换
  • weixin_35987513
  • weixin_35987513
  • 2016-11-30 15:53:47
  • 10357

vue二级路由设置

项目当中使用vue的时候一定会用到路由,并且二级路由甚至三集路由的需求都是刚需,当然,多级路由的配置方法和二级的是一样的,简单讲讲二级路由的配置吧。       首先把一级路由的结构准备好: ...
  • dongguan_123
  • dongguan_123
  • 2017-06-01 14:06:35
  • 4121

Vue.js结合vue-router和webpack编写单页路由项目

一、前提 1. 安装了node.js 2. 安装了npm 3. 检查是否安装成功: 打开cmd,输入node,没有报“node不是内部或外部命令”表示安装成功node.js。 打开cmd,输入npm,...
  • zwcwu31
  • zwcwu31
  • 2016-09-12 14:09:27
  • 3063

AngularJS怎样刷新当前路由页面

(1)整个页面同时都刷新:     (2)刷新当前路由页面:       (3)$state.reload();方法。利用$state服务   $state.reload()是加载整个...
  • u012767607
  • u012767607
  • 2018-01-29 11:19:17
  • 219

vue-router 如何在当前路由下重新点击当前路由的router-link实现刷新

代码: 首页  export default {   ...   ...   methods:{     flushCom:function(){       /...
  • p358278505
  • p358278505
  • 2017-12-19 14:53:47
  • 948

基于vue-cli的vue项目之路由6--重定向2-----页面初始化重定向

vue 路由重定向
  • HUSHILIN001
  • HUSHILIN001
  • 2017-09-06 10:36:14
  • 1070

第18篇:ui-router强制刷新当前路由

在使用ui-router的项目中当编辑某个栏目完成之后需要重新加载,或者当输入信息有误需要恢复初始的表单状态时,就需要对当前路由进行强制刷新,在angular1.4版本中使用$state.reload...
  • weixin_36185028
  • weixin_36185028
  • 2017-07-26 11:16:39
  • 1101

AngularJS中重新加载当前路由页面

这个问题同样困扰我很久,网上的回答五花八门,全都不能解决;终于在网上找很久,看到某大神的解决办法,作此分享; 成功解决使用ui-router重新加载当前页面的问题。...
  • m0_37885651
  • m0_37885651
  • 2017-08-30 16:29:40
  • 4611

Vue.js实战之利用vue-router实现跳转页面

对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。 ...
  • Sky786905664
  • Sky786905664
  • 2017-05-18 15:58:39
  • 4062
收藏助手
不良信息举报
您举报文章:Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
举报原因:
原因补充:

(最多只允许输入30个字)