使用vue-router切換頁面時，獲取上一頁url以及當前頁面url的方法
更新時間：2019年05月06日 16:05:25 作者：抖音
這篇文章主要介紹了使用vue-router切換頁面時，獲取上一頁url以及當前頁面url的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
今天在實現(xiàn)一個小功能的時候，遇到一個問題，使用vue-router獲取上一頁面的url信息，我嘗試了多種方式，發(fā)現(xiàn)使用vue-router的canDeactivate鉤子實現(xiàn)這個功能最為方便，現(xiàn)在將我的實現(xiàn)代碼總結如下:
項目使用的是vue-cli,直接貼代碼
export default {
mixins: [],
vuex: {
actions: {fetchCertificates},
},
data() {
return {}
},
route: {
data() {
this.$root.showLoading();
return this.fetchCertificates().then((res) => {
this.$root.dismissLoading();
if (res.error) return this.$root.toastError(res.error);
if(res.data.certificates.length >0){
return res.data;
}else{
console.log(this.$route ,"----當前頁面的url信息----");
}
});
},
canActivate (transition) {
console.log(transition,"======上一個頁面的url信息=======");
transition.next();
}
},
}
以上所述是小編給大家介紹的使用vue-router切換頁面時，獲取上一頁url以及當前頁面url的方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Vue移動端實現(xiàn)調用相機掃描二維碼或條形碼的全過程
最近在使用vue開發(fā)的h5移動端想要實現(xiàn)一個調用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關于Vue移動端實現(xiàn)調用相機掃描二維碼或條形碼的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了vue日期組件,支持vue1.0和2.0，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
vue-cli腳手架模板是基于node下的npm來完成安裝，這篇文章主要介紹了vue-cli腳手架的安裝教程圖解 ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue如何使用CSS自定義變量，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)目錄樹結構，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定原理
這篇文章主要介紹了proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定原理,文章以介紹proxy的優(yōu)點開始展開全文內容，圍繞proxy實現(xiàn)vue3數(shù)據(jù)雙向綁定的相關資料，,需要的朋友可以參考一下2021-12-12
在web后臺管理項目中,經(jīng)常要用到dialog,就vue來說,使用方式則是引入組件,注冊,在template中使用,試想一下,如果我們需要在項目中的不同.vue文件中使用該dialog,但是又不想每次都在template中寫入組件該如何實現(xiàn)呢？本文我們介紹用指令控制dialog,需要的朋友可以參考下2024-07-07
這篇文章主要給大家介紹了關于vue中watch和computed區(qū)別的相關資料,computed和watch都是vue框架中的用于監(jiān)聽數(shù)據(jù)變化的屬性,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了vue.js中使用mint-ui框架的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue 本地環(huán)境判斷方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04