使用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中關(guān)于this指向的問(wèn)題示例詳解
在Vue中，方法體里用this調(diào)用vue實(shí)例的數(shù)據(jù)，有時(shí)會(huì)指向window，導(dǎo)致調(diào)用失敗報(bào)錯(cuò)，這篇文章主要介紹了Vue中關(guān)于this指向的問(wèn)題 ,需要的朋友可以參考下2022-07-07
vue 實(shí)現(xiàn)Web端的定位功能 獲取經(jīng)緯度
這篇文章主要介紹了vue 實(shí)現(xiàn)Web端的定位功能獲取經(jīng)緯度，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
基于Vue實(shí)現(xiàn)一個(gè)textarea幽靈建議功能
不知道你有沒(méi)有發(fā)現(xiàn)Bing AI聊天有個(gè)輸入提示功能,在用戶輸入部分內(nèi)容時(shí)后面會(huì)給出灰色提示文案,用戶只要按下tab鍵就可以快速添加提示的后續(xù)內(nèi)容,我將這個(gè)功能稱為幽靈建議,接下來(lái)我將用Vue框架來(lái)實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下2023-09-09
Axios 毋庸多說(shuō)大家在前端開發(fā)中常用的一個(gè)發(fā)送 HTTP 請(qǐng)求的庫(kù)，用過(guò)的都知道,篇文章主要給大家介紹了關(guān)于vue中如何簡(jiǎn)單封裝axios的相關(guān)資料,需要的朋友可以參考下2021-06-06
本篇文章主要介紹了詳解Vue中添加過(guò)渡效果 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
vue+el-select?多數(shù)據(jù)分頁(yè)搜索組件的實(shí)現(xiàn)
本文主要介紹了vue+el-select?多數(shù)據(jù)分頁(yè)搜索組件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能
今天小編就為大家分享一篇Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue?結(jié)合Sortablejs實(shí)現(xiàn)table行排序功能
在一個(gè)列表展示頁(yè)面上，使用了表格組件，原有組件本身不支持拖拽功能，需求要求在列表的基礎(chǔ)上支持行拖拽排序，因此引入了www.sortablejs.com插件，接下來(lái)通過(guò)本文給大家講解Vue?結(jié)合Sortablejs實(shí)現(xiàn)table行排序功能,需要的朋友可以參考下2022-10-10
vue3使用socket.io的踩坑實(shí)戰(zhàn)記錄
Socket.io將Websocket和輪詢機(jī)制以及其它的實(shí)時(shí)通信方式封裝成了通用的接口,并且在服務(wù)端實(shí)現(xiàn)了這些實(shí)時(shí)機(jī)制的相應(yīng)代碼,下面這篇文章主要給大家介紹了關(guān)于vue3使用socket.io踩坑的相關(guān)資料,需要的朋友可以參考下2023-03-03
詳解如何使用Vue實(shí)現(xiàn)圖像識(shí)別和人臉對(duì)比
隨著人工智能的發(fā)展，圖像識(shí)別和人臉識(shí)別技術(shù)已經(jīng)被廣泛應(yīng)用于各種應(yīng)用程序中，Vue為我們提供了許多實(shí)用工具和庫(kù)，可以幫助我們?cè)趹?yīng)用程序中進(jìn)行圖像識(shí)別和人臉識(shí)別，在本文中，我們將介紹如何使用Vue進(jìn)行圖像識(shí)別和人臉對(duì)比,需要的朋友可以參考下2023-06-06