Question

我正在开发vue.js应用程序。我试图像这样从一个组件到另一个组件传递重定向参数：

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

一旦组件加载了我的路径，我就可以像这样检索参数：

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: [...]
        }
      });

...但是这使组件中的参数不可用（我想知道这是否与我们的全局路由器有关，该路由器将“ / my-path”路由到MyPath组件而不指定参数；是否清除了这些参数？？）。

谢谢。

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);
}

我希望这会有用

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

1 个答案: