问题

假设一个 JSX 组件 A 拥有下面的 props 属性

// 给从应用中心和调度中心跳转过来的日志查询使用
const props = {
  logType: {
    type: String as PropType<string>,
  },
  appName: {
    type: String as PropType<string>
  }
}

const Logging= defineComponent({

    name:"A",
    props,
    setup(props,ctx) {
    }
}
)

现在假设 要从 B 组件跳转到 A 组件中来，并且要携带 props 参数应该怎么做？

方式一

开启路由中的 props ，适合前后端分离的部署方式

        {
            name: "logging",
            path: '/a/log/logging',
            component: components('Logging.tsx'),
            meta: {title: '日志', roles: ['dev', 'admin'] },
            props: true
        }

B 组件中的跳转代码

        router.push({
            name: "logging",
            params:{
                logType: "appLog",
                appName: row.applicationName
            }
        })

方式二

使用函数模式进行路由转换，适合所有的模式包括前后端一体

        {
            name: "logging",
            path: '/a/log/logging',
            component: components('Logging.tsx'),
            meta: {title: '日志', roles: ['dev', 'admin'] },
            props: (route)=>({...route.query})
        },

B 组件中的跳转代码，注意从 params 改成了 query

        router.push({
            name: "logging",
            query: {
                logType: "appLog",
                appName: row.applicationName + "#" +row.k8sNamespace
            }
        })