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)訪(fǎng)問(wèn)當(dāng)前組件的實(shí)例。
也許有人會(huì)問(wèn)了，為什么不直接利用 this 訪(fǎng)問(wèn)組件實(shí)例。
原因在官方文檔中也有說(shuō)明：
beforeRouteEnter 守衛(wèi)不能訪(fǎng)問(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` 訪(fǎng)問(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刷新修改頁(yè)面中數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果的實(shí)現(xiàn)代碼，文章包括難點(diǎn)說(shuō)明，介紹的非常詳細(xì)，感興趣的朋友參考下2017-01-01
這篇文章主要介紹了Vue3?中的ref與props屬性知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-04-04
vue?perfect-scrollbar(特定框架里使用非該框架定制庫(kù)/插件)
這篇文章主要為大家介紹了vue?perfect-scrollbar在特定框架里使用一款并非為該框架定制的庫(kù)/插件如何實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-05-05
vue導(dǎo)入新工程?“node_modules依賴(lài)”問(wèn)題
這篇文章主要介紹了vue導(dǎo)入新工程?“node_modules依賴(lài)”問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項(xiàng)目中使用hls.js播放m3u8視頻踩過(guò)的坑小結(jié)
hls.js是一個(gè)用于在瀏覽器中播放HLS（HTTP?Live?Streaming）視頻流的JavaScript庫(kù),這篇文章主要介紹了vue項(xiàng)目中使用hls.js播放m3u8視頻踩過(guò)坑的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-07-07
map()函數(shù)定義在JS的array中,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于Vue中map()的用法案例,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
本文重點(diǎn)給大家介紹Vue拖拽組件開(kāi)發(fā)實(shí)例，拖拽的原理是手指在移動(dòng)的過(guò)程中，實(shí)時(shí)改變?cè)氐奈恢眉磘op和left值，使元素隨著手指的移動(dòng)而移動(dòng)。對(duì)實(shí)例代碼感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章主要介紹了VUE 中添加手機(jī)驗(yàn)證碼組件,需要的朋友可以參考下2017-12-12
關(guān)于實(shí)現(xiàn)Vue3版抖音滑動(dòng)插件踩坑指南
這篇文章主要給大家介紹了關(guān)于實(shí)現(xiàn)Vue3版抖音滑動(dòng)插件踩坑指南,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02