我经历过这个[电子邮件受保护]对象参数这是有一定关系的。有提到这个https://github.com/vuejs/vue-router-next/issues/494在那条线索中,但我仍然很困惑。
我还尝试使用传递一些数据:to的属性路由器链接成分。我做了两支笔来展示这个问题:
Pen 1成功传递在路由定义中定义的对象。
Pen 2正在尝试传递一个动态对象,但它获取的是一个带有 [Object object] 的字符串,而不是实际对象,如 github 问题中所述。
控制台输出:
[Vue warn]:无效的道具:道具“存储库”的类型检查失败。预期对象,得到具有 > 值“[object Object]”的字符串。
在
在
在
在
所以,如果我明白这一点,最终你不能传递一个动态对象,因为它被解析了,但你可以传递一个静态对象?
我尝试过使用道具:真实和一切,我正在尝试功能模式作为更复杂示例的解决方案
片段:
<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 };
}
}];