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