vue2如何獲取上頁的url地址
vue2獲取上頁的url地址
需求
在vue2的項(xiàng)目中有一個(gè)需求需要獲取上一頁路由的url的地址，在網(wǎng)上找了一會也沒有找到合適的答案，最后還是在官方文檔中找到了答案，因此將此方法記錄下來，希望能給有需要的人提供一點(diǎn)幫助。
思路
思路其實(shí)很簡單，就是利用 beforeRouteEnter 這個(gè)鉤子中的from參數(shù)獲得之前url的信息，然后給 next 傳遞回調(diào)來訪問當(dāng)前組件的實(shí)例。
也許有人會問了，為什么不直接利用 this 訪問組件實(shí)例。
原因在官方文檔中也有說明：
beforeRouteEnter 守衛(wèi)不能訪問 this，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場的新組件還沒被創(chuàng)建。
具體代碼
在想獲取上頁的組件內(nèi)：
data(){
return {
oldUrl:''
}
},
beforeRouteEnter (to, from, next){
next(vm => {
// 通過 `vm` 訪問組件實(shí)例,將值傳入oldUrl
vm.oldUrl = from.path
})
},
mounted(){
this.$nextTick(()=>{
// 驗(yàn)證是否獲取到了上頁的url
/* eslint-disable no-console */
console.log(this.oldUrl)
})
}主要邏輯實(shí)現(xiàn)就在 beforeRouteEnter 這個(gè)鉤子里實(shí)現(xiàn)。
vue中獲取url路徑
需要使用window.location.[options]
我們先彈出看一下window.location會顯示什么？
alert(window.location);
/sys-user為當(dāng)前vue的路徑
options屬性有如下
| 屬性 | 描述 |
|---|---|
| hash | 從#號開始的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 | 從問好（?)開始的URL（查詢部分） |
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)椴樵冏址畇earch只能在取到“？”后面和“#”之前的內(nèi)容，如果“#”之前沒有“？”search取值為空。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇Vue刷新修改頁面中數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實(shí)現(xiàn)ajax滾動下拉加載，同時(shí)具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)ajax滾動下拉加載，同時(shí)具有l(wèi)oading效果的實(shí)現(xiàn)代碼，文章包括難點(diǎn)說明，介紹的非常詳細(xì)，感興趣的朋友參考下2017-01-01
這篇文章主要介紹了Vue3?中的ref與props屬性知識,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-04-04
vue?perfect-scrollbar(特定框架里使用非該框架定制庫/插件)
這篇文章主要為大家介紹了vue?perfect-scrollbar在特定框架里使用一款并非為該框架定制的庫/插件如何實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-05-05
vue導(dǎo)入新工程?“node_modules依賴”問題
這篇文章主要介紹了vue導(dǎo)入新工程?“node_modules依賴”問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項(xiàng)目中使用hls.js播放m3u8視頻踩過的坑小結(jié)
hls.js是一個(gè)用于在瀏覽器中播放HLS（HTTP?Live?Streaming）視頻流的JavaScript庫,這篇文章主要介紹了vue項(xiàng)目中使用hls.js播放m3u8視頻踩過坑的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-07-07
map()函數(shù)定義在JS的array中,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于Vue中map()的用法案例,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
本文重點(diǎn)給大家介紹Vue拖拽組件開發(fā)實(shí)例，拖拽的原理是手指在移動的過程中，實(shí)時(shí)改變元素的位置即top和left值，使元素隨著手指的移動而移動。對實(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版抖音滑動插件踩坑指南
這篇文章主要給大家介紹了關(guān)于實(shí)現(xiàn)Vue3版抖音滑動插件踩坑指南,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02