Question

我正在尝试在我的Vue.js应用程序中使用嵌套路由。我有路由工作，但我无法弄清楚如何将数据从父路由传递到子路由。

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

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

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

我想通过＆＃34;个人资料＆＃34;变量到子路径＆＃34; / user /：id / profile＆＃34;。在＆＃34; / user /：id / posts＆＃34;的情况下，我想通过＆＃34;帖子＆＃34;变量。

我以为我可以用道具来完成这个，但我找不到一个适合路由的例子，我尝试的东西似乎不起作用。

这是我想要做的jsfiddle的链接。

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

Answer 1

这对于props绝对可行。

在父组件中

<template>
...
<router-view :profile="myDataObject.profile" />
...
</template>

在子组件中

<script>
export default {
  name: "child",
  props: ["profile"]
...

现在，您可以在子组件中通过引用this.$props.profile来访问数据。

我正在Vue 2.5.16中使用此模式。和Vue Router 3.0.1。

PS：一个不错的选择是在这种情况下也使用vuex。

Answer 2

您可以使用自己创建的服务检索数据。在给出的示例中，我已更新以跟踪导航后的＆＃34;获取数据＆＃34;样本显示在文档中。它有一个userService来处理用户的个人资料。

const userService = {
    findProfile(id) { return 'Profile Data'; }
};

然后我更新了UserProfile组件，以便在创建时获取配置文件，并观察$route的更改。

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

至于像props: []一样传递它我没有看到方法，但这可能是一件好事，因为它可能开始变得非常复杂。在这里，您明确知道用户配置文件的来源，并且不需要跟踪兔子洞来弄清楚。

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

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

2 个答案: