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