H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

例如:当前所在url是 xxx.com/foo/bar?params=123
点击一个按钮,要跳转到 this.$router.push(‘/detail’);

希望跳转过去时url是 xxx.com/detail?params=123
而不是 xxx.com/detail

查询了文档思路应该是 beforeEach 的时候,调用next时传递一些参数即可,不过大概看了一下文档没理解该怎么用

以下用法导致了路由不断的重定向,应该是next重定向后,又重新进入了beforeEach的钩子里面,然后就死循环了

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
  console.log('router msg:');
  console.log(to,from,next);
  next({
    path: to.path,
    query: from.query
  })
})

希望vue老司机指点迷津

回答:

我觉得是不是题主的思路方向错了?
我们要达到的目的是点击按钮去跳转xxx.com/detail?params=123
其实不需要在路由的beforeEach里面去完成这件事,在这个函数里面的应该是一些全局的处理
看代码,题主应该用的是vue1.0的吧
如我所理解的题主想到达到的效果应该是在点击按钮的时候带上$route.query参数
可以在你的按钮(建议改成a链接)里加上这个

<a v-link="{path: '/detail', query: $route.query}">detail</a>

或者js方法跳转

methods: {
    detail: function () {
        this.$router.go({
            path: '/detail',
            query: this.$route.query
        })
    }
}

不知道是不是题主想要的,如果有问题可以追问

回答:

如果是登录权限呢? 我现在也遇到这个循环问题

问题已经解决:
为啥加了这段就没事了呢

图片描述

官网上面是这样的,好郁闷~刚刚重新查下了官网~~图片描述

本文地址:H5W3 » 如何使用vue-router在进入路由前给url加上参数

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址