vue框架实现清除浏览器历史栈的做法是什么
Admin 2022-09-05 群英技术资讯 1242 次浏览
需要跳转好几个页面进行表单提交,提交完之后,跳转回首页,返回上一页,发现还可以返回上一级页面路由
//可以拿到历史记录栈,清空栈
let routeHistory=history.length-1;
this.$router.go(-routeHistory);
那么问题来了
点击返回首页后,再点击手机的返回键 会打开D页面 再按手机返回键 会打开C页面,依次类推,
如何才能实现点击返回首页后,清空路由呢
mounted () {
if (window.history && window.history.pushState) {
// 向历史记录中插入了当前页
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
},
destroyed () {
window.removeEventListener('popstate', this.goBack, false);
},
methods: {
goBack () {
// console.log("点击了浏览器的返回按钮");
sessionStorage.clear();
window.history.back();
},
}
禁止有返回记录
mounted () {
if (window.history && window.history.pushState) {
// 向历史记录中插入了当前页
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goBack, false);
}
},
destroyed () {
window.removeEventListener('popstate', this.goBack, false);
},
methods: {
goBack () {
// console.log("点击了浏览器的返回按钮");
history.pushState(null, null, document.URL);
},
}
mounted 中:
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener("popstate", _this.onClickLeft, false); //_this.onClickLeft是返回的点击事件
}
methods: {
onClickLeft() {
// this.$route.query.radio支付页面到指定页面传的参数 来判断他的路由
if (this.$route.query.radio == 1 || this.$route.query.radio == 2) {
this.$router.push({ //返回指定页面
});
} else {
this.$router.go(-1); // 正常返回
}
},
// 将事件清除掉
destroyed() {
window.removeEventListener("popstate", this.onClickLeft, false);
}
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本篇文章带大家了解一下 JavaScript 中使用扩展运算符的不同方式,以及扩展运算符和剩余运算符之间的主要区别,希望对大家有所帮助!
这篇文章主要介绍vue.js Router嵌套路由,平时访问首页,里面有新闻类的/home/news,还有信息类的/home/message这时候就需要使用到嵌套路由,下面我们就来具体学习嵌套路由的原理,需要的朋友可以参考一下
监听属性可以针对某个属性进行监听,当监听的属性的值发生了变化,则会执行相应的函数,下面这篇文章主要给大家介绍了关于Vue监听属性的相关资料,需要的朋友可以参考下
这篇文章主要介绍了JS实现页面侧边栏效果探究,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
目录文件如 httpFile.js如下:consthttpd=require("http");constfs=require("fs");//创建服务httpd.createServer((req,res)=>{//读取www文件夹下的路径fs.readFile(`www${req.url}`,(err,data)=>{
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008