我正在开发 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=[...]');
...但我的目标是向用户隐藏参数(因此不要在网址中显示它们)。这是我寻找传递参数的替代方法的另一个原因(它甚至不隐藏它们)。
我也尝试过:
this.$router.push({
path: '/my-path',
params: {
anArray: [...]
}
});
...但这使得参数在组件中不可用(我想知道这是否与我们的全局路由器有关,该路由器将“/my-path”路由到 MyPath 组件而不指定参数;它是否会清除参数?) .
谢谢。
如果想对用户隐藏参数,则不能使用查询。相反,您应该使用参数。这里我给大家举个例子:
//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);
}
我希望这会有用
虽然
params
建议@elC0mpa是正确答案,但根据用例,这里有一些替代方案:
localStorage
/SessionStorage
将参数保存到
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']
接收物品值。
⚠ 应该注意的是,您需要为每个状态设置器/突变、获取器和操作相应地设置存储。请参阅此文档。