在vue中,獲取上一頁地址并不是一件難事,只需要使用$router對象中的history屬性即可,下面是示例代碼:
// 獲取上一頁地址 const prevUrl = this.$router.history.current.fullPath; console.log(`上一頁地址為:${prevUrl}`);
在代碼中,我們首先通過this.$router.history.current獲取當(dāng)前路由信息,然后通過fullPath屬性獲取當(dāng)前頁面的完整路徑,將其保存在prevUrl變量中,并輸出到控制臺上。
另外,如果想在路由切換時(shí)獲取上一頁地址,我們可以使用$route對象中的meta屬性。meta屬性可以用來保存一些路由元信息,利用這個(gè)特性,我們可以將上一頁地址添加到meta中,例如:
// 在路由切換前,將上一頁地址添加到meta中 beforeRouteLeave(to, from, next) { // 將上一頁地址添加到meta中 to.meta.prevUrl = from.fullPath; // 執(zhí)行路由切換 next(); } // 在mounted鉤子中獲取上一頁地址 mounted() { const prevUrl = this.$route.meta.prevUrl; console.log(`上一頁地址為:${prevUrl}`); }
代碼中,我們利用路由守衛(wèi)的beforeRouteLeave方法,在路由切換前將上一頁地址添加到to.meta中。然后在mounted鉤子中,可以通過this.$route.meta.prevUrl獲取上一頁地址,將其保存在prevUrl變量中,并輸出到控制臺上。