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