vue 所有的路由跳轉加一個統一引數
阿新 • • 發佈:2018-11-08
需求是什麼
所有的路由跳轉加一個統一的引數
實現方式
先深入理解一下router的全域性前置守衛
router.beforeEach((to, from, next) => { const queryData = to.query if(from.path!='/'){//重新整理和首次進來的時候from.path都沒有值 if(from.query.chCode!=to.query.chCode){ to.query.chCode = from.query.chCode router.push({path:to.path,query:to.query}) return } } //token存在 if (vuex.getters.getAccessToken) { //這個if判斷的動作是我自己的業務邏輯 const param= cloneDeep(queryData) if (queryData.code) { delete param.code delete param.state next({query:param}) } else { next() } //code存在 }else if (queryData.code) { const param= cloneDeep(queryData) delete param.code delete param.state let appIds if(localStorage.getItem('temp')!=='wx'){ appIds='ww4426bfa09f4b044b' }else{ appIds='wx34284214d7a79ba1' } const params={ appId: appIds, code: queryData.code } http(urls.jointLogin, params).then(res => { vuex.dispatch('setAccessToken', res.data.accessToken) next({path:to.path, query:param}) }).catch(err => { next({path:'/500',query:param}) }) } else { next() }
遇到什麼問題
因為。beforeeach的這個函式。 其實在路由進頁面之前就定好了。 你現在改也無濟於事。 已經是馬後炮了 這個next函式,,這裡面又分為四種情況。如上面的圖,仔細品味一下,什麼值都不傳的時候,它是相當於重新走了一個完整的生命週期,並不是說接著你之前的走,,,我剛開始的做法是 在beforeEach的to和from裡,能獲取到帶的引數,在這個時候我也能加引數,但是你在這個時候不管加多少引數,頁面路由跳轉的時候url都收不帶這個引數的(因為它走的是next()方法,重新走了生命週期,你剛剛加的就沒效果)。所以你在這個時候。 應該讓她 不重新走生命週期,,打破常規。 重新調路由的方法,讓他跳轉傳引數,就解決了
解決方法
跳轉到一個不同的地址。當前的導航被中斷,然後進行一個新的導航。