如何在 Vue.js 嵌套路由中将数据从父路由传递到子路由？

Question

我正在尝试在我的 Vue.js 应用程序中使用嵌套路由。我有路由工作，但是我不知道如何将数据从父路由向下传递到子路由。

基本上，父路由将检索具有属性的对象。对于每个特定的嵌套子路由，我想显示该对象的一个属性。

例如，如果我有以下对象：

myDataObject : {name : "Foo" , profile : "Profile Data", posts : "Posts Data" }

我想将 "profile" 变量传递给子路由“/user/:id/profile”。在“/user/:id/posts”的情况下，我想传递 "post" 变量。

我以为我可以使用 props 完成此操作，但我找不到适合路由的示例，而且我尝试的方法似乎不起作用。

这是一个 link 的 jsfiddle，说明我正在尝试做的事情。

http://jsfiddle.net/90q4sucj/2/

Answer 1

请参阅下面的答案以获得正确答案

! You can retrieve data by using services you create. In the example given I've updated to follow the "fetch data after navigation" sample shown in the docs. It has a userService that will handle getting the user's profile.

! const userService = { findProfile(id) { return 'Profile Data'; } }; ! Then I updated the UserProfile component to get the profile when it's created and it watches the $route for changes.

! const UserProfile = { data() { return { profile: null } }, template: 'Profile {{ $route.params.id }} {{ profile }}', methods: { setProfile: function () { this.profile = userService.findProfile(this.$route.params.id); } }, created: function () { this.setProfile(); }, watch: { '$route': 'setProfile' } }

! As for passing it through like props: [] I didn't see a way but that's probably a good thing because it could start getting pretty convoluted. Here you know explicitly where the user profile is coming from and don't need to follow a rabbit hole to figure it out.

! http://jsfiddle.net/90q4sucj/3/

Answer 2

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。

如何在 Vue.js 嵌套路由中将数据从父路由传递到子路由？

How can you pass data from a parent route to a child route in Vue.js nested routes?

javascript

vue-router