vue 所有的路由跳轉加一個統一參數

需求是什么

所有的路由跳轉加一個統一的參數

實現方式

先深入理解一下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()方法，重新走了生命周期，你剛剛加的就沒效果）。所以你在這個時候。 應該讓她 不重新走生命周期，，打破常規。 重新調路由的方法，讓他跳轉傳參數，就解決了

解決方法

跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。