vue2如何獲取上頁的url地址

更新時間：2024年03月01日 09:58:06 作者：haishangfeie

這篇文章主要介紹了vue2如何獲取上頁的url地址問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue2獲取上頁的url地址

需求

在vue2的項目中有一個需求需要獲取上一頁路由的url的地址，在網(wǎng)上找了一會也沒有找到合適的答案，最后還是在官方文檔中找到了答案，因此將此方法記錄下來，希望能給有需要的人提供一點幫助。

思路

思路其實很簡單，就是利用 beforeRouteEnter 這個鉤子中的from參數(shù)獲得之前url的信息，然后給 next 傳遞回調來訪問當前組件的實例。

也許有人會問了，為什么不直接利用 this 訪問組件實例。

原因在官方文檔中也有說明：

beforeRouteEnter 守衛(wèi)不能訪問 this，因為守衛(wèi)在導航確認前被調用,因此即將登場的新組件還沒被創(chuàng)建。

具體代碼

在想獲取上頁的組件內：

   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為當前vue的路徑

options屬性有如下

屬性	描述
hash	從#號開始的RUL
host	主機名和當前URL的端口
hostname	當前URL的主機名
herf	完整的URL
pathname	當前URL的路徑部分
port	當前URL的端口
protocol	當前URL協(xié)議
search	從問好（?)開始的URL（查詢部分）