在vue中如何用全局路由鉤子給url統(tǒng)一添加公共參數(shù)

本文小編為大家詳細(xì)介紹“在vue中如何用全局路由鉤子給url統(tǒng)一添加公共參數(shù)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“在vue中如何用全局路由鉤子給url統(tǒng)一添加公共參數(shù)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

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

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

那么,我們該如何做呢？因為vue中有很多組件.在每個組件都寫的話,太麻煩.所以這個時候,全局路由鉤子登場了.分別是

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

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

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

我們此次用到的是前置守衛(wèi).開始我用的是后置守衛(wèi).因為出現(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í)行,路由不會跳轉(zhuǎn).路由在跳轉(zhuǎn)的時候,如果我們輸出from和to.他們分別代表上一個路由和現(xiàn)在的路由.假如我們要從a調(diào)到b;也就是跳轉(zhuǎn)的時候,我們馬上獲取b路由地址.并且判斷此時b路由有沒有abc這個參數(shù).如果有就直接跳轉(zhuǎn)過去,next方法執(zhí)行.并且return;如果沒有,然后如果a這個url有abc這個參數(shù)了,那么我們就把這個參數(shù)放到b的url上;并且next方法執(zhí)行.攜帶上這個參數(shù)就行了. 最后,如果a沒有這個參數(shù) ,直接next方法執(zhí)行.也就是說路由直接跳轉(zhuǎn)過去,不做任何攔截。

讀到這里，這篇“在vue中如何用全局路由鉤子給url統(tǒng)一添加公共參數(shù)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。