如何在 vue.js 中使用 router.push 传递参数？

Question

我正在开发一个 vue.js 应用程序。我正在尝试将参数从一个组件重定向到另一个组件，如下所示：

      this.$router.push({
        path: '/my-path',
        query: {
          anArray: [...]
        }
      });

加载 my-path 中的组件后，我可以像这样检索参数：

const theArray = this.$route.query.anArray;

问题是我一刷新页面，参数就没有了。当我打开 Chrome DevTools 并在从 $route.query 检索数组的位置放置一个断点时，我看到了：

0: "[object Object]"
1: "[object Object]"
2: "[object Object]"

很明显，它是从以下网址获取的：

http://localhost:8080/my-path?anArray=%5Bobject%20Object%5D&anArray=%5Bobject%20Object%5D&anArray=%5Bobject%20Object%5D

似乎没有意识到 url 中的“对象”术语只是实际对象的编码，它们在 $route.query 第一次加载时就可以使用。

是否有另一种方法可以使用 $router.push() 将参数传递给组件，以使参数在刷新后仍保留在页面上？

我可以试试：

this.$router.push('/my-path?anArray=[...]');

...但我的目标是对用户隐藏参数（所以不要在 url 中显示它们）。这是我正在寻找另一种传递参数的方法的另一个原因（它甚至不隐藏它们）。

我也试过了：

      this.$router.push({
        path: '/my-path',
        params: {
          anArray: [...]
        }
      });

...但这使得组件中的参数不可用（我想知道这是否与我们的全局路由器有关?)。

谢谢。

Answer 1

如果你想对用户隐藏参数，你不能使用查询。相反，您应该使用参数。这里我举个例子：

//routes.js
path: '/:data',
name: 'Home',
component: () => import('pages/YourPage.vue')

//Passing parameters
this.$router.push({
      name: 'Home',
      params: { data: yourData}
    });

//Receiving parameters in Home component
created() {
    console.log('Params: ', this.$route.params);
}

希望对你有用