vue router返回到指定的路由的场景分析


Posted in Javascript onNovember 10, 2020

项目场景:

项目场景:示例:A(商品详情)——B(商品购买页面)-C(支付成功页面)——D(订单页面)


问题描述:

提示:这里描述项目中遇到的问题:
如果我们不做控制的话,安卓按照浏览器返回机制,依次从D-C-B-A这样子,这样子会有一定的bug,测试那边也是说不过去啊,原本想利用beforeRouteLeave这个来操作进行更改跳转,发现还是有点问题最后还是用beforeRouteEnter来操作了,先放上两个的区别吧:

这里先介绍一下导航守卫

> beforeRouteEnter 离开路由之前执行的函数,可用于页面的反向传值,页面跳转
> beforeRouteLeave	进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值

vue router返回到指定的路由的场景分析


原因分析: 错误写法没啥用,repalce就跟没有用一样, ```javascript beforeRouteLeave(to, from, next) { if (to.path == "/shopOnline/shopsuccess") { this.$router.replace({ name: "shopOnline" }); next(false); } else { next(); } }, ```

history.pushState(stateObject, title, url);

history.pushState()主要是在不刷新浏览器的情况下,创建新的浏览记录并插入浏览记录队列中。
1.状态对象(stateObject)--stateObject是一个JavaScript对象,通过pushState方法可以将stateObject内容传递到新页面中。
2.标题(title)--几乎没有浏览器支持该参数,但是传一个空字符串会比较安全。
3.地址(url)--新的历史记录条目的地址(可选,不指定的话则为文档当前URL);浏览器在调用pushState()方法后不会加载该地址;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常

解决方案:

不废话 我还是直接先贴代码吧

data(){
return {
 replaceUrl:"" // 记录你一开始进入的页面
}	
},
// this还不能直接取到
beforeRouteEnter(to, from, next) {
 next(vm => {
 	 //因为当钩子执行前,组件实例还没被创建
  // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
  console.log(vm);//当前组件的实例
  vm.replaceUrl = from.path;
 });
 },
 mounted() {
  // 挂载完成后,判断浏览器是否支持popstate
  if (window.history && window.history.pushState) {
  history.pushState(null, null, document.URL);
  /*popstate触发时机:当前历史条目为pushState创建时,事件被触发*/
  window.addEventListener('popstate', this.goRouteBack, false);
  }
 },
 methods: {
  goRouteBack(){
  // 需要过滤
	  let routerArray = [
	  "/shopOnline/establishOrder",
	  "/shopOnline/shopsuccess"
	  ];
	  if (routerArray.includes(this.replaceUrl)) {
	  //判断,当获取上个页面进来的路由是D的时候,返回到A页面
	  this.$router.replace({ path: "/shopOnline" });
	  } else {
	  this.$router.replace({ path: "/my" });
	  //判断,当有其他返回值的时候,返回到默认页面
	  }
		}
},
// 页面销毁时,取消监听。否则其他vue路由页面也会被监听 这个必须得写啊!不然来回跳转报错
 destroyed(){
  window.removeEventListener('popstate', this.goRouteBack, false);
 }

到此这篇关于vue router返回到指定的路由的场景分析的文章就介绍到这了,更多相关vue router返回到指定的路由内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
js 文件引入实现代码
Apr 23 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
了解JavaScript中的选择器
May 24 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 #Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 #Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
Nov 09 #jQuery
夯基础之手撕javascript继承详解
Nov 09 #Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 #Javascript
es5 类与es6中class的区别小结
Nov 09 #Javascript
vue实现标签云效果的示例
Nov 09 #Javascript
You might like
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
python清除字符串里非字母字符的方法
2015/07/02 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Python GUI编程完整示例
2019/04/04 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
财务管理专业毕业生求职信
2014/06/02 职场文书
中秋客户感谢信
2015/01/22 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python