将多个道具传递给路由中的 Vue 组件 (vue-router)

Question

大师，

我有一个 VueJS 子组件，我运行如下所示并且工作正常 -

<app-shopping :categories="categories" :imageList="imageList">

现在我想为此添加一个单独的路由，但我不确定如何在路由声明中传递 categories 和 imageList 道具。我正在这样做 -

import appShopping from '../components/AppShopping.vue';
export const routes = [
  { path: '/',
  component: appShopping,
  props: true,
},
];

谁能告诉我如何将 props 从父组件传递给这个组件？感谢您的帮助

编辑：添加到问题中 如果我的路线由不同的组件组成，每个组件都有自己的一组从父级传递的道具，我该如何扩展解决方案？

编辑 2：进一步添加 虽然下面给出的解决方案有效，但它似乎不必要地将不需要的道具传递给子组件。例如，它将 categories 和 imageList 属性传递给属于路由的所有组件。有办法解决这个问题吗？或者这是否需要一种不同的状态管理方法，例如 Vuex？

谢谢。

Answer 1

您可以在 router-view 上传递属性。

<router-view :categories="categories" :imageList="imageList"></router-view>

Passing multiple props to Vue component in a route (vue-router)