vue3頁面組件中怎么獲取上一個頁面的路由地址
更新時間：2024年02月23日 15:17:30 作者：lucky_zouzou
這篇文章主要給大家介紹了關于vue3頁面組件中怎么獲取上一個頁面的路由地址的相關資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
vue2中獲取上個頁面的路由地址是用vue-router的beforeRouterEnter鉤子
beforeRouteEnter(to, from, next) {
next(vm=>{ // 這里的vm就是vue實例，可以用來當做this使用
console.log(to)
console.log(from) //from便是上一個路由的地址
})
}
那vue3中怎么獲取呢，在vue-router文檔中沒有找到相關的鉤子，于是就在router中找一找，還真的找到了，mark一下~
import { useRouter } from 'vue-router';
const router = useRouter();
onMounted(()=>{
console.log(router) //在router.options.history.state中back字段就可以看到上一個頁面的路由信息（但是只能看到上一個）
})
打印出來是這個樣子的：
這個back字段里就是上一個頁面的路由。
但是需要注意的是這個頁面的路由push到路由棧時才會有這個，也就是說如果上一個頁面是通過replace進入這個頁面時，back中不會有信息。
附：vue怎樣拿到上一個路由的地址，解決點擊返回不生效的問題
重復點擊觸發(fā)到當前路由，點擊this.$router.go(-1)，則還是會返回點擊點的重復路由，解決辦法如下：
進入頁面的時候記錄下進來的路由信息，存為全部變量，點擊返回時切換到進來的路由
在vue生命周期里面加（記得在data里面聲明pathEnterUrl）
beforeRouteLeave：離開路由之前執(zhí)行的函數(shù)。
next(); 下一步 ，放不放行，必須有這個，相當于一個按鈕開啟一樣。
from 記錄來的路由信息，to記錄跳轉(zhuǎn)目的路由信息
beforeRouteEnter(to, from, next) {
next(vm => {
vm.pathEnterUrl = from.fullPath
})
} goBack() {
this.$router.push({ path: `${this.pathEnterUrl}` })
},總結
到此這篇關于vue3頁面組件中怎么獲取上一個頁面的路由地址的文章就介紹到這了,更多相關vue3獲取上一頁面路由地址內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了Vue實現(xiàn)Excel預覽功能使用場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問題的完美解決方案，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
Vue.nextTick是Vue官方給我們提供的一個API（方法），作用是在下次DOM更新循環(huán)結束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的DOM2021-04-04
vue全局引入公共的scss和@mixin與@include的使用方式
這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了Vue如何提升首屏加載速度實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
Vue路由懶加載是一種優(yōu)化技術,旨在減少應用程序的初始加載時間并提高性能,這篇文章給大家介紹vue路由懶加載的相關知識,感興趣的朋友跟隨小編一起看看吧2024-05-05
第一次寫Vue項目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說，先上代碼，我再講一些要注意的細節(jié)2022-12-12
vue里面v-bind和Props 利用props綁定動態(tài)數(shù)據(jù)的方法
今天小編就為大家分享一篇vue里面v-bind和Props 利用props綁定動態(tài)數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
淺談vue-cli加載不到dev-server.js的解決辦法
本篇文章主要介紹了淺談vue-cli加載不到dev-server.js的解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
今天小編就為大家分享一篇解決vue attr取不到屬性值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09