vue-router往router component传props如果是named-views的话必须为每个named-view都定义props
在ssr改造时发现往Index.vue传props死活传不了,组件是named-view。
{ path: 'list/:page', meta: { isGoodsList: true }, components: { default: () => import('pages/Index.vue'), // hot: () => import('components/HotList.vue'), hot: () => import('components/ResourceSideList.vue'), }, props: (route) => ({ page: route.query.q }), }, { path: '/:path', meta: { isGoodsList: true }, components: { default: () => import('pages/Index.vue'), hot: () => import('components/ResourceSideList.vue'), }, props: (route) => ({ query: route.query.q, page: route.query.page }), },
问题找了半天还是在view-router的官方文档 上找到了问题:还是自己基本没打牢啊
For routes with named views, you have to define the props option for each named view: const routes = [ { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ]
改成如下:
{ path: 'list/:page', meta: { isGoodsList: true }, components: { default: () => import('pages/Index.vue'), // hot: () => import('components/HotList.vue'), hot: () => import('components/ResourceSideList.vue'), }, props: { default: (route) => ({ page: route.query.q }), hot: false }, }, { path: '/:path', meta: { isGoodsList: true }, components: { default: () => import('pages/Index.vue'), hot: () => import('components/ResourceSideList.vue'), }, props: { default: (route) => ({ query: route.query.q, page: route.query.page }), hot: false, }, },
喜欢艺术的码农