如何使用vue-router在进入路由前给url加上参数

需求为需要在url每个路由上都加上channel字段
next()与next('/')区别,前者不执行beforeEach导航钩子,后者会执行,故如果没有next()则会死循环

to是要跳转的路由
from是来自哪个路由

//注册一个全局前置守卫,确保要调用 next 方法,否则钩子就不会被 resolved
router.beforeEach((to, from, next) => {
    //判断该页面有channel
    if(from.query.channel){
        //路由切换时,如果没有就添加,有就跳过执行,添加固定参数
        if (!to.query.channel) {
            //准备一个跳转的query对象
            let query = to.query
            query.channel = from.query.channel
            next({
              path: to.path,
              query: query
            })
        } else {
            next()
        }
    }else{
        next()
    }
})

在如何使用vue-router在进入路由前给url加上参数 评论查到用if(to.matched.some(record => record.meta.requiresAuth))这个判断,加上就不死循环了,但我试了下发现和直接next()是一样的,没有给我加上channel

参考

vue-router的beforeEach导航钩子,next('/')出现死循环问题
用 vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)

你可能感兴趣的:(如何使用vue-router在进入路由前给url加上参数)