Vue-router4 - 传递带有 <router-link :to> 的对象不会传递动态数据
Vue-router4 - Passing object with <router-link :to> won't pass dynamic data
我在那个帖子中经历了这个 which is somewhat related. There is a mention of this https://github.com/vuejs/vue-router-next/issues/494,但我仍然很困惑。
我也在尝试使用 路由器 link 组件的 :to 属性传递一些数据。我做了两支笔来展示这个问题:
Pen 1 传递在路由定义中定义的对象 - 成功。
Pen 2 试图传递一个动态对象,而不是实际对象,它得到一个带有 [Object object] 的字符串,如 github 问题中所述。
控制台输出:
[Vue warn]: Invalid prop: type check failed for prop "repository". Expected Object, got String with >value "[object Object]".
at <Repository repository="[object Object]" onVnodeUnmounted=fn ref=Ref >
at
at
at
所以,如果我明白这一点,最终你不能传递一个动态对象因为它被解析了,但你可以传递一个静态对象?
我已经尝试过 props: true 和一切,我正在尝试 function mode 解决方案作为一个更复杂的例子
片段:
<router-link :to="{ name: 'Home' }">Home</router-link>
<router-view />
<router-link
:to="{
name: 'Repository',
params: { repository: { one: '1', two: '2' } },
}">click me</router-link>
v1
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/repo/",
name: "Repository",
component: () => import("../components/Repository.vue"),
props: (route) => {
console.log("entered route");
console.log(route);
return { ...route.params, repository: { one: "1", two: "2" } };
}
}];
v2
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/repo/",
name: "Repository",
component: () => import("../components/Repository.vue"),
props: (route) => {
console.log("entered route");
console.log(route);
return { ...route.params };
}
}];
传递任意数据(未在路由定义中定义为params) was never supported in Vue-router and never worked as expected. Check my
您的示例 v1
之所以有效,是因为在路由的 props
函数中定义的 repository
的值覆盖了从 router-link
传递的 repository
值params
(如您在控制台中所见,即 repository: "[object Object]"
)
So, if I get this straight, ultimately you cant pass a dynamic object cos it's parsed, but you can pass a static object?
没有
你不能使用 $router.push
或 router-link
传递任何对象(即使它在 Vue-router 3 中“有点工作” - 再次,请参阅我的链接答案)
您可以在路由定义中将 props
定义为一个对象或一个返回对象的函数,它的属性将被传递给您的组件的道具,而无需任何编码或任何东西。但这与使用 $router.push
或 router-link
非常不同,因为数据不是来自源路由而是来自路由器本身...
您的代码中发生了什么:
正如您在控制台的警告消息中看到的那样,您实际上是从 prop 中获取 String
而不是 Object
:
[Vue warn]: Invalid prop: type check failed for prop "repository".
Expected Object, got String
很多人建议使用 Vuex 并设置全局状态作为解决方案,我相信这不是您要找的。
解决方案
为了避免将[Object, Object]
作为传递的数据,您可以做的是在原始页面中将对象字符串化,然后在目标页面上再次将传递的字符串解析为对象。
原始page/router组件
<router-link
:to="{
name: 'Your_Route_Name',
params: { repository: JSON.stringify({ one: '1', two: '2' }) },
}">click me</router-link>
在您的目标路由器组件中
<template>
<div>
{{ JSON.parse(repository) }}
</div>
</template>
<script>
export default {
props: ["repository"],
setup(props) {
//Log the parsed object in console. Example shown with Vue3 Composition API but you get the idea.
console.log(JSON.parse(props.customer));
}
}
</script>
这样,您就可以按预期传递 Object。
我在那个帖子中经历了这个
我也在尝试使用 路由器 link 组件的 :to 属性传递一些数据。我做了两支笔来展示这个问题:
Pen 1 传递在路由定义中定义的对象 - 成功。
Pen 2 试图传递一个动态对象,而不是实际对象,它得到一个带有 [Object object] 的字符串,如 github 问题中所述。
控制台输出:
[Vue warn]: Invalid prop: type check failed for prop "repository". Expected Object, got String with >value "[object Object]". at <Repository repository="[object Object]" onVnodeUnmounted=fn ref=Ref > at at at
所以,如果我明白这一点,最终你不能传递一个动态对象因为它被解析了,但你可以传递一个静态对象?
我已经尝试过 props: true 和一切,我正在尝试 function mode 解决方案作为一个更复杂的例子
片段:
<router-link :to="{ name: 'Home' }">Home</router-link>
<router-view />
<router-link
:to="{
name: 'Repository',
params: { repository: { one: '1', two: '2' } },
}">click me</router-link>
v1
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/repo/",
name: "Repository",
component: () => import("../components/Repository.vue"),
props: (route) => {
console.log("entered route");
console.log(route);
return { ...route.params, repository: { one: "1", two: "2" } };
}
}];
v2
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/repo/",
name: "Repository",
component: () => import("../components/Repository.vue"),
props: (route) => {
console.log("entered route");
console.log(route);
return { ...route.params };
}
}];
传递任意数据(未在路由定义中定义为params) was never supported in Vue-router and never worked as expected. Check my
您的示例 v1
之所以有效,是因为在路由的 props
函数中定义的 repository
的值覆盖了从 router-link
传递的 repository
值params
(如您在控制台中所见,即 repository: "[object Object]"
)
So, if I get this straight, ultimately you cant pass a dynamic object cos it's parsed, but you can pass a static object?
没有
你不能使用
$router.push
或router-link
传递任何对象(即使它在 Vue-router 3 中“有点工作” - 再次,请参阅我的链接答案)您可以在路由定义中将
props
定义为一个对象或一个返回对象的函数,它的属性将被传递给您的组件的道具,而无需任何编码或任何东西。但这与使用$router.push
或router-link
非常不同,因为数据不是来自源路由而是来自路由器本身...
您的代码中发生了什么:
正如您在控制台的警告消息中看到的那样,您实际上是从 prop 中获取 String
而不是 Object
:
[Vue warn]: Invalid prop: type check failed for prop "repository". Expected Object, got String
很多人建议使用 Vuex 并设置全局状态作为解决方案,我相信这不是您要找的。
解决方案
为了避免将[Object, Object]
作为传递的数据,您可以做的是在原始页面中将对象字符串化,然后在目标页面上再次将传递的字符串解析为对象。
原始page/router组件
<router-link
:to="{
name: 'Your_Route_Name',
params: { repository: JSON.stringify({ one: '1', two: '2' }) },
}">click me</router-link>
在您的目标路由器组件中
<template>
<div>
{{ JSON.parse(repository) }}
</div>
</template>
<script>
export default {
props: ["repository"],
setup(props) {
//Log the parsed object in console. Example shown with Vue3 Composition API but you get the idea.
console.log(JSON.parse(props.customer));
}
}
</script>
这样,您就可以按预期传递 Object。