vue-router中怎么保持一个参数永远存在（参数透传）？

Question

我们有个页面上报的脚本依赖url参数deviceid，那个js因为是公共的不好改，所以希望所有页面都能自动带着deviceid

比如，如果用户打开了

localhost/index?deviceid=123

那么他通过任意的router-link

<router-link :to="{name:'Detail',``query:{id:item.id}}"></router-link>

打开detail页面，希望可以自动带着deviceid

localhost/detail?deviceid=123&id=111

请问这种要怎么实现？

Answer 1

router.beforeEach((to, from, next) => {
  if (!to.query.deviceid) {
    next({
      path: to.path,
      query: {
        deviceid: 1001
      }
    });
  } else {
    next();
  }
});

Answer 2

可以直接用vue-router的导航钩子：beforeEach()

router.beforeEach((to, from, next) => {
  to.query.detailid = 'name';
  console.log(to);
  next();
});

这样就可以对每个路由都设置参数detailid。然后可以就可以在别的地方获取到这个参数值了。

Answer 3

请问问题解决了吗？我也遇到相同的问题了。如果解决了，麻烦分享一下吧。3q