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 相关文章推荐
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
php文件缓存类汇总
2014/11/21 PHP
PHP常用处理静态操作类
2015/04/03 PHP
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
Vue列表页渲染优化详解
2017/07/24 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python帮你识破双11的套路
2019/11/11 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
python判断是空的实例分享
2020/07/06 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
证婚人经典证婚词
2014/01/09 职场文书
实习单位接收函模板
2014/01/10 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
甲午风云观后感
2015/06/02 职场文书
楚门的世界观后感
2015/06/03 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android