vue返回首页后如何清空路由

需求一：从首页点击路由到A页面
A页面点击路由到B页面
B页面点击路由到C页面
C页面点击路由链接到D页面
D页面有个返回首页按钮
那么问题来了
点击返回首页后，再点击手机的返回键会打开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);}

vue返回首页后如何清空路由相关推荐

[微信小程序]提交表单返回成功后自动清空表单的值
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 实现思路: 给每一个input绑定相同的value对象,提交成功后把这个对象赋值为空. 下面看代码: ...
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页前言问题分析问题解决结语前言众所周知,Vue路由有两种模式,默认hash模式,这种模式下url上会带"#&q ...
Vue踩坑日记： history路由打包后无法加载
前言: 在使用Vue框架时避免不了会使用到vue-router工具,Vue-router提供了Hash和History两种路由模式.默认为Hash模式,但此模式下URL中会存在 "#&quo ...
[vue] 怎么缓存当前打开的路由组件，缓存后想更新当前组件怎么办呢？
[vue] 怎么缓存当前打开的路由组件,缓存后想更新当前组件怎么办呢? 可以在路由meta中加入参数, 对打开的路由进行keep-alive的判断, 通过钩子active等个人简介我是歌谣,欢迎和 ...
vue中如何点击返回上一页，vue判断没有上页返回首页
vue中如何点击返回上一页,vue判断没有上页返回首页 vue中返回上一页 // 返回 returnBtn(){this.$router.go(-1); }, 返回上一页,先判断是否有上一页,没有则返 ...
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题本质就是设置一个变量isshare来判断是否是分享页面中进入的 data设置 isshare: 0,//不是分享页面进入 js o ...
VUE 返回上一页不刷新页面、重复进入同一页面created重复执行、每次进入页面时都执行created、vue单页面多路由，前进刷新，返回不刷新
每次进入页面时都执行created.前进刷新,返回不刷新思路: 利用 keep-alive与vue-router配合使用 ,判断哪些页面需要每次进入刷新,哪些页面不需要每次进入刷新: keepAli ...
vue设置首页不经过路由，直接使用自定义的html页面
vue设置首页不经过路由,直接使用自定义的html页面直接在路由跳转那里设置 window.location.href 参数为要跳转的html页面就可以了
vue 打包路由报错_急急急急，vue打包部署后，路由无法跳转
求助 vue打包部署后首页可以正常访问,可是一但点击下一步:就没反应:控制台报错: (打包后的index.html文件和JS文件分别部署在服务器的不同文件夹下,但是在index.html文件中的lin ...

vue返回首页后如何清空路由

vue返回首页后如何清空路由相关推荐

最新文章

热门文章