请教一下如何在 vue3 jsx 写法中使用 unplugin-vue-router 自动生成路由 jsx 中添加 meta.layout 信息?

85 天前
 whooami

正确的写法在 unplugin-vue-router 解析页面读取信息后生成的 route.ts 中会加入类似以下代码段的 meta 信息

{
    path: "/hi",
    name: "/hi",
    component: () => import("./assets/_hi_-kdq1g9hr.js"),
    /* no children */
    meta: {
      "layout": home
    }
  },

[正确运行]原作者给出的是 vue 写法

<script setup lang="ts">
const { t } = useI18n()
</script>

<template>
  <div>
    {{ t('found') }}
  </div>
</template>

<route lang="yaml">
meta:
  layout: home
</route>

[失败,没有 meta]转换成 jsx 写法, 使用"@vitejs/plugin-vue-jsx": "^3.1.0",编译

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    // your setup code here
    const { t } = useI18n()
    // eslint-disable-next-line unused-imports/no-unused-vars
    const { route } = useRoute()

    return () => (
      <>
        <div>
          { t('found') }
        </div>
        <route lang="yaml">
        meta:
          layout: home
        </route>
      </>
    )
  },
})
1084 次点击
所在节点    Vue.js
4 条回复
liuw666
85 天前
是不是有 defineRoute
whooami
85 天前
@liuw666 route 是通过 import { useRoute } from 'vue-router'; const route = useRoute(); 使用的。
组件给出了 vue3 setup 的写法 https://github.com/posva/unplugin-vue-router?tab=readme-ov-file#definepage-in-script
但加在 jsx 中还是没有效果
```
<script setup>
import { definePage } from 'vue-router/auto'

definePage({
name: 'my-own-name',
path: '/absolute-with-:param',
alias: ['/a/:param'],
meta: {
custom: 'data',
},
})
</script>
```
wos54
85 天前
纯 jsx 没办法吧, sfc 里的倒是可以试试
whooami
84 天前
@wos54 谢谢。是的,原作者说考虑后续支持

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1015683

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX