在vue中路由使用this.$router.go(-1)返回两次问题
更新时间：2023年12月04日 17:14:52 作者：DemoJx
这篇文章主要介绍了在vue中路由使用this.$router.go(-1)返回两次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue路由使用this.$router.go(-1)返回两次
问题
在项目中给返回按钮添加事件，并且使用了this.$router.go(-1)，目的是为了返回上一个页面，然后点击之后钩子路由走了两次，返回到了上上个页面。
解决
若你也有遇到这种问题，请先检查你的路由配置中所有的name，看看是否存在命名出错。
同事的路由配置代码如下：
const router=new Router({
mode:'history',
routes: [
{
path:'/news/list',
name:'new.list',
component:NewsList
}
})
我们可以发现他的name多了一个 点 ，然而问题就出现在这里了。
此时我们把name修改后，再运行代码，一切正常，问题得以解决。
const router=new Router({
mode:'history',
routes: [
{
path:'/news/list',
name:'newList',
component:NewsList
}
})
this.$router.go(-1)无效
问题描述
h5页面放在android的webview中运行的时候，发现this.$router.go(-1)返回失效。
解决思路
在beforeRouteEnter钩子时，使用sessionStorage存储from.path；然后在点击返回的时候使用this.$router.push
代码：
beforeRouteEnter(to, from, next) {
next(vm => {
window.sessionStorage.setItem('lasterRouter', from.path)
})
},//返回事件时调用
this.$router.push(window.sessionStorage.getItem('lasterRouter'))另一种方法：
直接调用浏览器的window.history.back()
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue.js 利用v-for中的index值实现隔行变色效果，首先定义好样式，利用v-for中的index值，然后绑定样式来实现隔行变色,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue 无法覆盖vant的UI组件的样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本篇文章主要介绍了vue.js获取数据库数据实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）
这篇文章主要介绍了详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
在Vue.js应用中,Vue-Router是一个非常重要的插件,它允许我们实现页面间的导航,然而,仅仅实现导航是不够的,我们还需要在导航的不同阶段进行各种操作,本文将结合实际案例,详细介绍Vue-Router路由守卫的用法,需要的朋友可以参考下2024-12-12
本篇文章主要介绍了vue-router 导航钩子的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了Vue中watchEffect的追踪逻辑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue中的锚点定位问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue select 绑定动态变量的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue.js 中的 v-cloak 指令及使用详解，通过案例给大家简单介绍了vue中v-cloak的使用，感兴趣的朋友跟随小编一起看看吧2018-11-11
最新评论