vue-router- 将查询参数从旧路由持久化到新路由的方式答案

【问题标题】：vue-router- way to persist query param from old route to new routevue-router- 将查询参数从旧路由持久化到新路由的方式
【发布时间】：2018-05-08 17:34:06
【问题描述】：

对于我的应用程序中的每条路由，如果有某个查询参数，我们称之为userId，我希望下一个路由也包含该查询参数。

一种解决方案是修改每个router-link 和router.push 以添加此查询参数，但我想使用router.beforeEach 来解决此问题。

我试过了，但它会启动一个无限循环：

router.beforeEach((to, from, next) => {
  if (from.query.userId) {
    next({
      path: to.path,
      query: Object.assign({}, to.query, from.query.userId),
    })
  }
  next()
})

vue-router 中是否有任何方法可以让我保留查询参数（如果它存在于上一个路由中）？

【问题讨论】：

听起来你最好使用动态路由匹配：router.vuejs.org/en/essentials/dynamic-matching.html
我不知道，“userid”确实不是我们应用的用户，它仅用于跟踪目的，与页面本身无关。
你为什么使用 : query: Object.assign({}, to.query, from.query.userId)，而不仅仅是 query: from.query ？

标签： javascript vue.js vue-router

【解决方案1】：

我遇到了同样的问题，这是我的生产解决方案：

router.beforeEach((to, from, next) => {
    let requiresAuth = (to.meta.hasOwnProperty('requiresAuth') ? to.meta.requiresAuth : true);

    //... comment
    if (!store.getters.isAuthenticated() && requiresAuth) {
        next({name: 'login', params: {...{redirect: to.name}, ...to.params}});
        return;
    } else if (store.getters.isAuthenticated() && !store.getters.isDataPreloaded() && to.name !== 'preloading') {
        //... comment
        next({name: 'preloading', params: {...{redirect: to.name}, ...to.params}});
        return;
    }

    next();
})

使用什么都没关系 - 查询或参数。不要忘记，您可以在重定向时使用可选参数来告知正在发生的事情。您可以添加一个可选的param，如redirected，并在您的beforeEach 方法中检查它，如果它设置为true - 执行一个操作，如果它设置为false - 执行另一个操作。

请记住，使用params 属性，您可以在路由之间交换您想要的任何数据（JS 对象），而无需在 URL 中向您的用户显示这些数据。

让我解释一下我的代码为什么以及如何工作：

用户打开一个页面example.com/my-private-zone/dashboard/reports
系统检查他是否已经通过身份验证，如果没有 - 保存 from 路由并重定向到 login 页面 - example.com/login。
用户验证
用户被重定向到 preloading 页面 (example.com/preloading)，所有需要的 JS 脚本都已预加载。
用户被重定向到从 0 步开始的路线。如您所见，我是 passing 最终重定向的用户入口点（如 redirect 参数），而不会更改向用户显示的 URL。

你的代码也应该没问题，你忘了在if 分支中添加return 语句：

router.beforeEach((to, from, next) => {
  if (from.query.userId) {
    next({
      path: to.path,
      query: Object.assign({}, to.query, from.query.userId),
    })
    return;
  }
  next()
})

希望这会有所帮助！

【讨论】：