V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
whooami
V2EX  ›  Vue.js

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

  •  
  •   whooami · 120 天前 · 1145 次点击
    这是一个创建于 120 天前的主题,其中的信息可能已经有所发展或是发生改变。

    正确的写法在 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>
          </>
        )
      },
    })
    
    4 条回复    2024-02-16 10:20:14 +08:00
    liuw666
        1
    liuw666  
       120 天前 via iPhone
    是不是有 defineRoute
    whooami
        2
    whooami  
    OP
       119 天前
    @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
        3
    wos54  
       119 天前
    纯 jsx 没办法吧, sfc 里的倒是可以试试
    whooami
        4
    whooami  
    OP
       119 天前
    @wos54 谢谢。是的,原作者说考虑后续支持
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5232 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 06:03 · PVG 14:03 · LAX 23:03 · JFK 02:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.