vue3頁面組件中怎么獲取上一個(gè)頁面的路由地址
vue2中獲取上個(gè)頁面的路由地址是用vue-router的beforeRouterEnter鉤子
beforeRouteEnter(to, from, next) {
next(vm=>{ // 這里的vm就是vue實(shí)例，可以用來當(dāng)做this使用
console.log(to)
console.log(from) //from便是上一個(gè)路由的地址
})
}
那vue3中怎么獲取呢，在vue-router文檔中沒有找到相關(guān)的鉤子，于是就在router中找一找，還真的找到了，mark一下~
import { useRouter } from 'vue-router';
const router = useRouter();
onMounted(()=>{
console.log(router) //在router.options.history.state中back字段就可以看到上一個(gè)頁面的路由信息（但是只能看到上一個(gè)）
})
打印出來是這個(gè)樣子的：
這個(gè)back字段里就是上一個(gè)頁面的路由。
但是需要注意的是這個(gè)頁面的路由push到路由棧時(shí)才會(huì)有這個(gè)，也就是說如果上一個(gè)頁面是通過replace進(jìn)入這個(gè)頁面時(shí)，back中不會(huì)有信息。
附：vue怎樣拿到上一個(gè)路由的地址，解決點(diǎn)擊返回不生效的問題
重復(fù)點(diǎn)擊觸發(fā)到當(dāng)前路由，點(diǎn)擊this.$router.go(-1)，則還是會(huì)返回點(diǎn)擊點(diǎn)的重復(fù)路由，解決辦法如下：
進(jìn)入頁面的時(shí)候記錄下進(jìn)來的路由信息，存為全部變量，點(diǎn)擊返回時(shí)切換到進(jìn)來的路由
在vue生命周期里面加（記得在data里面聲明pathEnterUrl）
beforeRouteLeave：離開路由之前執(zhí)行的函數(shù)。
next(); 下一步 ，放不放行，必須有這個(gè)，相當(dāng)于一個(gè)按鈕開啟一樣。
from 記錄來的路由信息，to記錄跳轉(zhuǎn)目的路由信息
beforeRouteEnter(to, from, next) {
next(vm => {
vm.pathEnterUrl = from.fullPath
})
} goBack() {
this.$router.push({ path: `${this.pathEnterUrl}` })
},總結(jié)
到此這篇關(guān)于vue3頁面組件中怎么獲取上一個(gè)頁面的路由地址的文章就介紹到這了,更多相關(guān)vue3獲取上一頁面路由地址內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue實(shí)現(xiàn)標(biāo)簽云效果的示例
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了淺談Vue數(shù)據(jù)響應(yīng)，Vue的數(shù)據(jù)響應(yīng)主要是依賴了Object.defineProperty()，下面就具體來介紹一下如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)2018-11-11
當(dāng)我們未設(shè)置keepAlive的最大緩存數(shù)時(shí),當(dāng)緩存組件太多,會(huì)導(dǎo)致內(nèi)存溢出,本文給大家介紹了vue3手動(dòng)刪除keepAlive緩存的方法,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
vue模板配置與webstorm代碼格式規(guī)范設(shè)置
這篇文章主要介紹了vue模板配置與webstorm代碼格式規(guī)范設(shè)置詳細(xì)的相關(guān)資料,需要的朋友可以參考一下文章得具體內(nèi)容，希望對(duì)你有所幫助2021-10-10
Vue+LogicFlow+Flowable實(shí)現(xiàn)工作流
本文主要介紹了Vue+LogicFlow+Flowable實(shí)現(xiàn)工作流,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式
這篇文章主要介紹了vue點(diǎn)擊項(xiàng)目唯一id生成器nanoid的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue Cli 3項(xiàng)目使用融云IM實(shí)現(xiàn)聊天功能的方法
這篇文章主要介紹了Vue Cli 3項(xiàng)目 使用融云IM實(shí)現(xiàn)聊天功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue-cli項(xiàng)目的搭建方法，文中圖片介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了解決vue路由name同名,路由重復(fù)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08