将多个道具传递给路由中的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,
},
];

有人能告诉我如何将道具从父组件传递到此组件？ 谢谢你的帮助

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

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

谢谢。

Answer 1

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

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