Question

我正在使用以下路线设置构建应用。

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/home',
      name: 'Dashboard',
      component: Dashboard,
      beforeEnter(to, from, next) {
        if (!store.getters.isLoggedIn) {
          next('/login');
        } else {
          next();
        }
      }
    },
    {
      path: '/',
      redirect: '/home'
    }
  ]
});

我还根据我使用$router.push的一些选择框设置了查询参数，如下所示。

this.$router.replace({
    query: {
        scope: this.$store.getters.filterScope
    }
});

我遇到的问题

重新加载页面会从URL中删除查询参数。
更新一个查询参数会删除我拥有的另一个查询参数。示例 - 使用上述方法更新scope会删除我已有的dateRange参数。

我也在使用Vuex所以有什么方法可以使用商店管理这些查询参数吗？

Answer 1

如果您将参数存储在vuex中并且不使用 vuex-persistedstate ，则刷新页面时状态将被删除。

所以，我的建议是：

your-awesome-site.com/dashboard?first=hello&second=hi

在您的仪表板组件中，您可以这样做

TOP

因此，您将从url检索参数并将其保存在vuex中。

您也可以使用此解决第二个问题。$ route.params

无法理解vue-router查询参数如何工作

我遇到的问题

1 个答案: