在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
    }
})

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

此時我們把name修改后，再運行代碼，一切正常，問題得以解決。

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

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

問題描述

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

解決思路

在beforeRouteEnter鉤子時，使用sessionStorage存儲from.path；然后在點擊返回的時候使用this.$router.push

代碼：

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

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

另一種方法：

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Django Vue實現(xiàn)動態(tài)菜單和動態(tài)權(quán)限
本文主要介紹了Django Vue實現(xiàn)動態(tài)菜單和動態(tài)權(quán)限，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Vue+Element-UI中el-table動態(tài)合并單元格:span-method方法代碼詳解
el-table是element-ui提供的表格組件,可以用于展示和操作數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于Vue+Element-UI中el-table動態(tài)合并單元格:span-method方法的相關(guān)資料,需要的朋友可以參考下
2023-09-09
Vue中key為index和id的區(qū)別示例詳解
這篇文章主要介紹了Vue中key為index和id的區(qū)別詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
VUE+elementui面包屑實現(xiàn)動態(tài)路由詳解
今天小編就為大家分享一篇VUE+elementui面包屑實現(xiàn)動態(tài)路由詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue實現(xiàn)下拉表格組件
這篇文章主要為大家詳細介紹了Vue實現(xiàn)下拉表格組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
詳細解讀VUE父子組件的使用
這篇文章主要介紹了詳細解讀VUE父子組件的使用,今天來講一種子父組件深度耦合的方式，使我們不用額外的創(chuàng)建新的組件，也可以達到一些效果，下面與你們分享一下
2023-05-05
vxe-table?實現(xiàn)按回車鍵自動新增一行(示例代碼)
本文通過示例代碼介紹了vxe-table新版本中實現(xiàn)回車自動換行功能的方法,通過設(shè)置keyboard-config.isLastEnterAppendRow參數(shù)可以控制是否開啟該功能,當回車鍵在最后一行按下時,會自動新增一行,并將光標移動到新行,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧
2024-12-12
如何根據(jù)業(yè)務(wù)封裝自己的功能組件
這篇文章主要介紹了Vue封裝功能組件，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
electron-vite新一代electron開發(fā)構(gòu)建工具
這篇文章主要介紹了electron-vite新一代electron開發(fā)構(gòu)建工具，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
基于vue組件實現(xiàn)猜數(shù)字游戲
這篇文章主要為大家詳細介紹了基于vue組件實現(xiàn)猜數(shù)字游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11