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,
        },
      },
复制代码

 

posted @   zjhgx  阅读(30)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示