1. 程式人生 > >vue 所有的路由跳轉加一個統一引數

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

解決方法


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