如何使用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 实现导航守卫(路由跳转前验证登录)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • vue是什么? vue是构建数据驱动的web界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现...
    九四年的风阅读 8,837评论 2 131
  • vue2有着深度继承的路由插件,即:vue-router,其中文的API地址。 vue-router与其他的路由(...
    白水螺丝阅读 17,690评论 0 17
  • 导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航。 参数或查询的改变并不会触发进入/离开的导航守卫。 1、全...
    SailingBytes阅读 1,229评论 1 3
  • 学习目的 学习Vue的必备技能,必须 熟练使用 Vue-router,能够在实际项目中运用。 Vue-rout...
    _1633_阅读 92,934评论 3 58
  • 首先抛出这样一个问题,vue-router是用来做什么的? 这里不着急回答,也不准备在这篇文章里回答。这篇文章仅总...
    1263536889阅读 713评论 0 2

友情链接更多精彩内容