vue2如何獲取上頁(yè)的url地址
vue2獲取上頁(yè)的url地址
需求
在vue2的項(xiàng)目中有一個(gè)需求需要獲取上一頁(yè)路由的url的地址，在網(wǎng)上找了一會(huì)也沒(méi)有找到合適的答案，最后還是在官方文檔中找到了答案，因此將此方法記錄下來(lái)，希望能給有需要的人提供一點(diǎn)幫助。
思路
思路其實(shí)很簡(jiǎn)單，就是利用 beforeRouteEnter 這個(gè)鉤子中的from參數(shù)獲得之前url的信息，然后給 next 傳遞回調(diào)來(lái)訪問(wèn)當(dāng)前組件的實(shí)例。
也許有人會(huì)問(wèn)了，為什么不直接利用 this 訪問(wèn)組件實(shí)例。
原因在官方文檔中也有說(shuō)明：
beforeRouteEnter 守衛(wèi)不能訪問(wèn) this，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒(méi)被創(chuàng)建。
具體代碼
在想獲取上頁(yè)的組件內(nèi)：
data(){
return {
oldUrl:''
}
},
beforeRouteEnter (to, from, next){
next(vm => {
// 通過(guò) `vm` 訪問(wèn)組件實(shí)例,將值傳入oldUrl
vm.oldUrl = from.path
})
},
mounted(){
this.$nextTick(()=>{
// 驗(yàn)證是否獲取到了上頁(yè)的url
/* eslint-disable no-console */
console.log(this.oldUrl)
})
}主要邏輯實(shí)現(xiàn)就在 beforeRouteEnter 這個(gè)鉤子里實(shí)現(xiàn)。
vue中獲取url路徑
需要使用window.location.[options]
我們先彈出看一下window.location會(huì)顯示什么？
alert(window.location);
/sys-user為當(dāng)前vue的路徑
options屬性有如下
| 屬性 | 描述 |
|---|---|
| hash | 從#號(hào)開(kāi)始的RUL |
| host | 主機(jī)名和當(dāng)前URL的端口 |
| hostname | 當(dāng)前URL的主機(jī)名 |
| herf | 完整的URL |
| pathname | 當(dāng)前URL的路徑部分 |
| port | 當(dāng)前URL的端口 |
| protocol | 當(dāng)前URL協(xié)議 |
| search | 從問(wèn)好（?)開(kāi)始的URL（查詢(xún)部分） |
alert(window.location.hash)
alert(window.location.host);
alert(window.location.hostname);
alert(window.location.href);
alert(window.location.pathname);
alert(window.location.port);
alert(window.location.protocol);
alert(window.location.search);
比如: http://localhost:8080/#/test?limitUserName=test&grade=0 像這種路徑,取到的就是空值
因?yàn)椴樵?xún)字符串search只能在取到“？”后面和“#”之前的內(nèi)容，如果“#”之前沒(méi)有“？”search取值為空。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE+Java實(shí)現(xiàn)評(píng)論回復(fù)功能
這篇文章主要為大家詳細(xì)介紹了VUE+Java實(shí)現(xiàn)評(píng)論回復(fù)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
vue進(jìn)行圖片的預(yù)加載watch用法實(shí)例講解
下面小編就為大家分享一篇vue進(jìn)行圖片的預(yù)加載watch用法實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue 2.0+Vue-router構(gòu)建一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用（附源碼）
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構(gòu)建了一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用，文中通過(guò)實(shí)例介紹的非常詳細(xì)，并在文末給出了源碼下載，需要的朋友可以下載學(xué)習(xí)參考，下面來(lái)一起看看吧。2017-03-03
在Vue3中使用Vue Tour實(shí)現(xiàn)頁(yè)面導(dǎo)覽
Vue Tour 是一個(gè)方便的 Vue.js 插件,它可以幫助我們?cè)诰W(wǎng)站或應(yīng)用中實(shí)現(xiàn)簡(jiǎn)單而靈活的頁(yè)面導(dǎo)覽功能,本文我們將介紹如何在 Vue 3 中使用 Vue Tour,并通過(guò)示例代碼演示其基本用法,需要的朋友可以參考下2024-04-04
這篇文章主要為大家介紹了Hooks對(duì)于Vue作用意義詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
下面小編就為大家分享一篇vue-prop父組件向子組件進(jìn)行傳值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
如何解決this.$refs.form.validate()不執(zhí)行的問(wèn)題
這篇文章主要介紹了如何解決this.$refs.form.validate()不執(zhí)行的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟
這篇文章主要介紹了webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟，詳細(xì)的介紹了兩種調(diào)試vue項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
在vue中對(duì)數(shù)組值變化的監(jiān)聽(tīng)與重新響應(yīng)渲染操作
這篇文章主要介紹了在vue中對(duì)數(shù)組值變化的監(jiān)聽(tīng)與重新響應(yīng)渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07