在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題

更新時(shí)間：2023年12月04日 17:14:52 作者：DemoJx

這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue路由使用this.$router.go(-1)返回兩次

問(wèn)題

在項(xiàng)目中給返回按鈕添加事件，并且使用了this.$router.go(-1)，目的是為了返回上一個(gè)頁(yè)面，然后點(diǎn)擊之后鉤子路由走了兩次，返回到了上上個(gè)頁(yè)面。

解決

若你也有遇到這種問(wèn)題，請(qǐng)先檢查你的路由配置中所有的name，看看是否存在命名出錯(cuò)。

同事的路由配置代碼如下：

const router=new Router({
  mode:'history',
  routes: [
    {
      path:'/news/list',
      name:'new.list',
      component:NewsList
    }
})

我們可以發(fā)現(xiàn)他的name多了一個(gè) 點(diǎn) ，然而問(wèn)題就出現(xiàn)在這里了。

此時(shí)我們把name修改后，再運(yùn)行代碼，一切正常，問(wèn)題得以解決。

const router=new Router({
  mode:'history',
  routes: [
    {
      path:'/news/list',
      name:'newList',
      component:NewsList
    }
})

this.$router.go(-1)無(wú)效

問(wèn)題描述

h5頁(yè)面放在android的webview中運(yùn)行的時(shí)候，發(fā)現(xiàn)this.$router.go(-1)返回失效。

解決思路

在beforeRouteEnter鉤子時(shí)，使用sessionStorage存儲(chǔ)from.path；然后在點(diǎn)擊返回的時(shí)候使用this.$router.push

代碼：

beforeRouteEnter(to, from, next) {
    next(vm => {
      window.sessionStorage.setItem('lasterRouter', from.path)
    })
  },

//返回事件時(shí)調(diào)用
this.$router.push(window.sessionStorage.getItem('lasterRouter'))

另一種方法：

直接調(diào)用瀏覽器的window.history.back()

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色
這篇文章主要介紹了Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色效果，首先定義好樣式，利用v-for中的index值，然后綁定樣式來(lái)實(shí)現(xiàn)隔行變色,需要的朋友可以參考下
2018-08-08
vue 無(wú)法覆蓋vant的UI組件的樣式問(wèn)題
這篇文章主要介紹了vue 無(wú)法覆蓋vant的UI組件的樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue.js獲取數(shù)據(jù)庫(kù)數(shù)據(jù)實(shí)例代碼
本篇文章主要介紹了vue.js獲取數(shù)據(jù)庫(kù)數(shù)據(jù)實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP（vue+webpack+HBulider）
這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP（vue+webpack+HBulider），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
Vue-Router路由守衛(wèi)詳?shù)募?xì)用法教程
在Vue.js應(yīng)用中,Vue-Router是一個(gè)非常重要的插件,它允許我們實(shí)現(xiàn)頁(yè)面間的導(dǎo)航,然而,僅僅實(shí)現(xiàn)導(dǎo)航是不夠的,我們還需要在導(dǎo)航的不同階段進(jìn)行各種操作,本文將結(jié)合實(shí)際案例,詳細(xì)介紹Vue-Router路由守衛(wèi)的用法,需要的朋友可以參考下
2024-12-12
vue-router 導(dǎo)航鉤子的具體使用方法
本篇文章主要介紹了vue-router 導(dǎo)航鉤子的具體使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
Vue中watchEffect的追蹤邏輯介紹
這篇文章主要介紹了Vue中watchEffect的追蹤邏輯,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04
vue中的錨點(diǎn)定位問(wèn)題
這篇文章主要介紹了vue中的錨點(diǎn)定位問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue select 綁定動(dòng)態(tài)變量的實(shí)例講解
這篇文章主要介紹了Vue select 綁定動(dòng)態(tài)變量的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
Vue.js 中的 v-cloak 指令及使用詳解
這篇文章主要介紹了Vue.js 中的 v-cloak 指令及使用詳解，通過(guò)案例給大家簡(jiǎn)單介紹了vue中v-cloak的使用，感興趣的朋友跟隨小編一起看看吧
2018-11-11