Vue-Router：为路由全局添加查询值答案

【问题标题】：Vue-Router: Globally Add Query Value to RoutesVue-Router：为路由全局添加查询值
【发布时间】：2019-02-11 14:31:17
【问题描述】：

????目标

我想将?instance=123 添加到生成的每条路线中。

????问题

在导航到每条路线之前，我添加了一个守卫来附加值，but this approach 无法按预期工作。

router.beforeEach((to, from, next) => {
  next({ query: { instance: '123' } });
});

这是如何实现的？

????️‍♂️上下文

“vue-router”：“^2.5.3”
“vue”：“2.3.2”，

【问题讨论】：

点赞github.com/vuejs/vue-router/issues/934#issuecomment-312477819
这正是。它有效。留下作为答案，我会接受。

标签： javascript vue.js vue-router

【解决方案1】：

使用codeofsumit 发布的github 中的代码似乎可以实现您想要的：

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

这样做是将instance 属性添加到查询对象，这是您在尝试中所做的，但是您错过了必须使用修改后的对象调用next 的部分，否则它将继续原路。

【讨论】：

【解决方案2】：

router.beforeEach((to, from, next) => {
  to.query.instance = '123';
  next();
});

【讨论】：

好像没有效果。
更新：当我在 next() 之前 console.log(to); 时，我可以看到 instance 值已正确分配。由于某种原因，它只是没有显示在浏览器 URL 中。
为什么需要在每条路线中显示?instance=123？我认为使用 beforeEach 更改每条路由中的查询值很奇怪。
这很不寻常。我需要将每个浏览器选项卡（对于此应用程序）绑定到特定且唯一的 localStorage 实例。效果类似于在不同选项卡中使用不同的 Gmail 帐户。（URL 中instance 的原因是为了在刷新时正确持久化存储。）
@Donnie 为什么不使用 sessionStorage？ sessionStorage 对于每个浏览器选项卡都是唯一的。这应该是预期用途。