526互联

vue-router往router component传props如果是named-views的话必须为每个named-view都定义props

发布时间 2023-03-23 16:02:51作者: zjhgx

在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,
        },
      },