Question

对于我的应用程序中的每个路由，如果有某个查询参数，我们称之为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中是否有任何方法允许我保留查询参数（如果它存在于上一个路由中？）

Answer 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。

您的代码也应该很好，您忘记在return分支中添加if语句：

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

希望这会有所帮助！

vue-router-将查询参数从旧路由持久保存到新路由

1 个答案: