我正在尝试在我的 Vue.js 应用程序中使用嵌套路由。我有路由工作，但是我不知道如何将数据从父路由传递到子路由。
基本上，父路由将检索具有属性的对象。对于每个特定的嵌套子路由，我想显示该对象的一个属性。
例如，如果我有下面的对象：
myDataObject : {name : "Foo" , profile : "Profile Data", posts : "Posts Data" }
我想将“profile”变量传递给子路由“/user/:id/profile”。在“/user/:id/posts”的情况下，我想传入“post”变量。
我以为我可以使用 props 完成此操作，但我找不到适合路由的示例，而且我尝试的方法似乎不起作用。
这是我正在尝试做的 jsfiddle 的链接。
【问题讨论】：
标签： javascript vue-router
props 绝对可以做到这一点。
在父组件中
<template>
...
<router-view :profile="myDataObject.profile" />
...
</template>
在子组件中
<script>
export default {
name: "child",
props: ["profile"]
...
现在，在您的子组件中，您可以通过引用 this.$props.profile 来访问数据。
我在 Vue 2.5.16 中使用这种模式。和 Vue 路由器 3.0.1。
PS：一个不错的选择是在这种情况下也使用vuex。
【讨论】：
正确答案见下方答案
！您可以使用您创建的服务检索数据。在给出的示例中，我已更新为遵循文档中显示的“导航后获取数据”示例。它有一个
userService来处理获取用户的个人资料。！常量用户服务 = { findProfile(id) { return '个人资料数据'; } }; ！然后我更新了 UserProfile 组件以在创建配置文件时获取配置文件，并监视
$route的更改。！常量用户配置文件 = { 数据（）{返回{个人资料：空}}， 模板：'配置文件{{ $route.params.id }} {{配置文件}}'， 方法： { setProfile: function () { this.profile = userService.findProfile(this.$route.params.id); } }, 创建：函数（）{ this.setProfile（）； }, 观看：{ '$route': 'setProfile' } }
！至于像
props: []这样通过它，我没有看到办法，但这可能是一件好事，因为它可能会开始变得非常复杂。在这里，您可以明确地知道用户配置文件的来源，而无需费力地找出答案。
【讨论】：