vue如何給url統一添加公共參數

這篇“vue如何給url統一添加公共參數”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue如何給url統一添加公共參數”文章吧。

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

這個參數稱為"公共參數";

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

router.beforeEach 全局導航前置守衛 路由跳轉前執行

router.beforeResolve 全局導航解析守衛 vue2.5新增 導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后， 解析守衛就被調用

router.afterEach 全局導航后置守衛 路由跳轉后執行

我們此次用到的是前置守衛.開始我用的是后置守衛.因為出現bug,也可能是本人技術不精.后又改為前置守衛.

代碼如下：

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()
 }
 
 });

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

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

以上就是關于“vue如何給url統一添加公共參數”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。