在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題
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è)參考，也希望大家多多支持腳本之家。
- vue中this.$router.go(-1)失效(路由改變了，界面未刷新)
- vue3使用vue-router嵌套多級(jí)路由的方法
- vue中路由router配置步驟詳解
- Vue?router?路由安裝及使用過(guò)程
- 解讀Vue-Router?使用?prams?路由傳參失效
- vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
- vue3中使用router路由實(shí)現(xiàn)跳轉(zhuǎn)傳參的方法
- vue3使用vue-router及路由權(quán)限攔截方式
- Vue3使用vue-router如何實(shí)現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
- Vue中vue-router路由使用示例詳解
相關(guān)文章
Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限
本文主要介紹了Django Vue實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)權(quán)限，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue+Element-UI中el-table動(dòng)態(tài)合并單元格:span-method方法代碼詳解
el-table是element-ui提供的表格組件,可以用于展示和操作數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于Vue+Element-UI中el-table動(dòng)態(tài)合并單元格:span-method方法的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue中key為index和id的區(qū)別詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
VUE+elementui面包屑實(shí)現(xiàn)動(dòng)態(tài)路由詳解
今天小編就為大家分享一篇VUE+elementui面包屑實(shí)現(xiàn)動(dòng)態(tài)路由詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)下拉表格組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了詳細(xì)解讀VUE父子組件的使用,今天來(lái)講一種子父組件深度耦合的方式，使我們不用額外的創(chuàng)建新的組件，也可以達(dá)到一些效果，下面與你們分享一下2023-05-05
vxe-table?實(shí)現(xiàn)按回車(chē)鍵自動(dòng)新增一行(示例代碼)
本文通過(guò)示例代碼介紹了vxe-table新版本中實(shí)現(xiàn)回車(chē)自動(dòng)換行功能的方法,通過(guò)設(shè)置keyboard-config.isLastEnterAppendRow參數(shù)可以控制是否開(kāi)啟該功能,當(dāng)回車(chē)鍵在最后一行按下時(shí),會(huì)自動(dòng)新增一行,并將光標(biāo)移動(dòng)到新行,代碼簡(jiǎn)單易懂,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要介紹了Vue封裝功能組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
electron-vite新一代electron開(kāi)發(fā)構(gòu)建工具
這篇文章主要介紹了electron-vite新一代electron開(kāi)發(fā)構(gòu)建工具，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
基于vue組件實(shí)現(xiàn)猜數(shù)字游戲
這篇文章主要為大家詳細(xì)介紹了基于vue組件實(shí)現(xiàn)猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11