无法理解 vue-router 查询参数的工作原理答案

【问题标题】：Unable to understand how vue-router query params work无法理解 vue-router 查询参数的工作原理
【发布时间】：2018-07-10 14:53:21
【问题描述】：

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

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，有什么方法可以使用商店管理这些查询参数？

【问题讨论】：

标签： vue.js routes vuejs2 vue-router vuex

【解决方案1】：

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

所以，我给你的建议：

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

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

mounted () { 
  console.log(this.$route.params)
  // Update vuex state filterScope
}

所以你将从 url 中检索你的参数并将其保存在 vuex 中。

您还可以使用 this.$route.params 解决您的第二个问题

【讨论】：