代码之家 › 专栏 › 技术社区 › gib65

如何在vue.js中通过router.push传递参数?

router refresh parameters vue.js

0

gib65 · 技术社区 · 6 年前

我正在开发一个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]"

很明显,它是从url中得到的,网址是:

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组件;这是在清除参数吗?)。

谢谢。

0 回复 | 直到 6 年前

1

7

elC0mpa 6 年前

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

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

我希望这能有用

2

0

A-Tech Ballsacian1 3 年前

虽然 params 建议@elC0mpa是一个正确的答案,这里有一些替代方案,具体取决于用例:

localStorage / SessionStorage

将参数保存到 本地存储 / 会话存储 并按照@nachodd指出的目标页面的加载顺序检索它们。

应该注意的是,只有字符串形式的键值对被保存到这些存储器中。你需要一些类似的东西

localStorage.setItem(itemKey,JSON.stringify(itemValue)

设置值和

const itemValue = JSON.parse(localStorage.getItem('itemKey')

接受它。还有 localStorage.removeItem('itemKey') 为了清理。

vuex store

您可能需要考虑将数据一起保存在存储中,并从任何vue组件访问它。所需的命令是 this.$store.commit('pathToStore/setterForKey',value) 把东西存到商店里 this.$store.getters[pathToStore/getterForKey'] 以接收物品价值。

应该注意的是,您需要为每个状态设置器/变异、getter和动作相应地设置存储。请参阅 this documentation .