在vue中怎么利用全局路由鉤子給url統(tǒng)一添加公共參數(shù)-創(chuàng)新互聯(lián)

小編給大家分享一下在vue中怎么利用全局路由鉤子給url統(tǒng)一添加公共參數(shù)，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)是一家專業(yè)從事成都網(wǎng)站建設(shè)、成都網(wǎng)站制作的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)絡(luò)公司,創(chuàng)新互聯(lián)依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷推廣及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！

有的時(shí)候我們可能有這樣的需求,比如現(xiàn)在url為m.taoyuewenhua.com/#/ 我們需要在用戶每次跳轉(zhuǎn)路由的時(shí)候監(jiān)控有沒有abc這個(gè)參數(shù). 如果有,后端要求我們?cè)谝院筇D(zhuǎn)任何url的時(shí)候,都要在url攜帶上這個(gè)參數(shù).就變成m.taoyuewenhua.com/#/&abc=xxx;

這個(gè)參數(shù)稱為"公共參數(shù)";

那么,我們?cè)撊绾巫瞿?？因?yàn)関ue中有很多組件.在每個(gè)組件都寫的話,太麻煩.所以這個(gè)時(shí)候,全局路由鉤子登場(chǎng)了.分別是

router.beforeEach 全局導(dǎo)航前置守衛(wèi) 路由跳轉(zhuǎn)前執(zhí)行

router.beforeResolve 全局導(dǎo)航解析守衛(wèi) vue2.5新增 導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后， 解析守衛(wèi)就被調(diào)用

router.afterEach 全局導(dǎo)航后置守衛(wèi) 路由跳轉(zhuǎn)后執(zhí)行

我們此次用到的是前置守衛(wèi).開始我用的是后置守衛(wèi).因?yàn)槌霈F(xiàn)bug,也可能是本人技術(shù)不精.后又改為前置守衛(wèi).

代碼如下：

router.beforeEach((to, from, next) => {
 if (to.query.abc) {
  next();
  return;
 };
 if (from.query.abc) {
  let toQuery = JSON.parse(JSON.stringify(to.query));
  toQuery.abc = from.query.abc;
  next({
   path: to.path,
   query: toQuery
  })
 } else {
  next()
 }
 
 });

在這里解釋一下: 前置守衛(wèi)一定記得執(zhí)行next方法.如果不執(zhí)行,路由不會(huì)跳轉(zhuǎn).路由在跳轉(zhuǎn)的時(shí)候,如果我們輸出from和to.他們分別代表上一個(gè)路由和現(xiàn)在的路由.假如我們要從a調(diào)到b;也就是跳轉(zhuǎn)的時(shí)候,我們馬上獲取b路由地址.并且判斷此時(shí)b路由有沒有abc這個(gè)參數(shù).如果有就直接跳轉(zhuǎn)過(guò)去,next方法執(zhí)行.并且return;如果沒有,然后如果a這個(gè)url有abc這個(gè)參數(shù)了,那么我們就把這個(gè)參數(shù)放到b的url上;并且next方法執(zhí)行.攜帶上這個(gè)參數(shù)就行了. 最后,如果a沒有這個(gè)參數(shù) ,直接next方法執(zhí)行.也就是說(shuō)路由直接跳轉(zhuǎn)過(guò)去,不做任何攔截。

看完了這篇文章，相信你對(duì)“在vue中怎么利用全局路由鉤子給url統(tǒng)一添加公共參數(shù)”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：在vue中怎么利用全局路由鉤子給url統(tǒng)一添加公共參數(shù)-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://muchs.cn/article48/djgshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、軟件開發(fā)、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)