如何在Vue.js中通过router-view向组件传递数据？

嗨，我来帮你搞定在Vue.js主应用里通过router-view给组件传数据的问题！你已经成功从API拿到数据了，接下来给你分享几个常用的实现方式，挑适合你项目的来用就行：

这种方法最简单，直接在你的模板里给router-view绑定需要传递的model数据，然后在目标组件里通过props接收即可。

修改你的模板代码：

@section('content')
  <div style="padding: 0.9rem" id="app">
    <!-- 给命名视图绑定model -->
    <router-view name="bookBus" :model="model"></router-view>
    <!-- 给默认视图绑定model -->
    <router-view :model="model"></router-view>
  </div>
@stop

然后在你的目标路由组件里，声明props来接收数据：

export default {
  // 声明接收model prop
  props: ['model'],
  mounted() {
    console.log(this.model); // 这里就能拿到主应用传递过来的API数据了
  }
}

如果你希望路由层面统一管理参数传递，可以在路由定义里配置props，支持静态值、布尔值或者函数返回的动态值。

假设你的路由配置是这样的：

const routes = [
  {
    path: '/your-page', // 你的页面路由路径
    // 对应你模板里的命名视图和默认视图
    components: {
      default: DefaultComponent, // 默认视图的组件
      bookBus: BookBusComponent // 命名视图bookBus的组件
    },
    // 用函数返回props，这里可以根据需要动态返回数据
    props: {
      // 给默认视图传props
      default: (route) => ({ model: window.app.$data.model }),
      // 给命名视图bookBus传props
      bookBus: (route) => ({ model: window.app.$data.model })
    }
  }
]

同样，目标组件还是需要声明props: ['model']来接收数据，这样组件挂载时就能拿到model了。

如果你的model数据需要在多个组件里共享使用，那用Vuex来管理会更方便。

首先在Vuex的store里定义状态和修改方法：

const store = new Vuex.Store({
  state: {
    model: null
  },
  mutations: {
    SET_MODEL(state, data) {
      state.model = data;
    }
  }
})

然后在主应用的mounted钩子中把API数据存入Vuex：

mounted() {
  // 假设你从API获取到了model数据
  this.$store.commit('SET_MODEL', model);
}

最后在路由组件里通过计算属性获取数据：

export default {
  computed: {
    model() {
      return this.$store.state.model;
    }
  },
  mounted() {
    console.log(this.model); // 拿到共享的model数据
  }
}

如果你的路由组件层级比较深，或者不想通过props层层传递，可以用Vue的provide/inject特性，主应用提供数据，后代组件直接注入使用。

在主应用组件里配置provide：

export default {
  data() {
    return {
      model: null
    }
  },
  mounted() {
    this.model = model; // 赋值API返回的数据
  },
  // 提供model数据给后代组件
  provide() {
    return {
      model: this.model
    }
  }
}

然后在路由组件里注入model：

export default {
  inject: ['model'],
  mounted() {
    console.log(this.model); // 直接拿到主应用提供的数据
  }
}

以上几种方法都能帮你把主应用的model数据传递给router-view里的组件，根据你的项目场景选就行啦！

内容的提问来源于stack exchange，提问作者Dapo Michaels