Adonis JS有没有类似Ziggy的工具？Vue3 SPA调用Adonis命名路由方案

AdonisJS生态有成熟的实现方案可以达到类似Laravel生态Ziggy的效果，无需额外引入重型扩展，仅需少量代码即可完成前后端命名路由的打通，具体使用指引如下：

1. 后端路由导出配置 #

AdonisJS内置了路由序列化能力，你可以直接开放一个轻量接口给前端拉取命名路由清单，也可以在构建阶段导出为静态JSON文件供前端直接引入。

接口导出方式（适合开发阶段灵活调试） #

在start/routes.ts中添加如下路由：

import router from '@adonisjs/core/services/router'

// 仅对前端SPA开放的路由导出接口
router.get('/api/__routes', async () => {
  return router.toJSON()
}).as('routes.export')

2. 前端路由辅助函数封装 #

在Vue3项目中封装通用的route工具函数，匹配后端返回的命名路由规则，自动拼接路径参数：

// src/utils/adonisRoute.ts
interface RouteItem {
  name: string
  pattern: string
  methods: string[]
}

let routeList: RouteItem[] = []

// 项目初始化时拉取一次路由清单
export async function initAdonisRoutes() {
  const res = await fetch('/api/__routes')
  routeList = await res.json()
}

// 生成对应命名路由的完整路径
export function route(routeName: string, params: Record<string, string | number> = {}) {
  const matchedRoute = routeList.find(item => item.name === routeName)
  if (!matchedRoute) {
    throw new Error(`未找到命名路由：${routeName}`)
  }

  let finalPath = matchedRoute.pattern
  // 替换路径动态参数
  Object.entries(params).forEach(([key, value]) => {
    finalPath = finalPath.replace(`:${key}`, String(value))
  })

  return finalPath
}

3. Vue3项目集成 #

在项目入口文件中初始化路由清单，可挂载为全局方法或者按需导入使用：

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { initAdonisRoutes, route } from './utils/adonisRoute'

const app = createApp(App)

// 初始化完成后再挂载应用
initAdonisRoutes().then(() => {
  // 全局挂载，所有组件可直接通过$route调用
  app.config.globalProperties.$route = route
  app.mount('#app')
})

实际使用示例 #

如果后端定义了如下命名路由：

router.get('/posts/:postId/comments/:commentId', () => {
  // 业务逻辑
}).as('posts.comments.show')

在Vue组件中可以直接调用生成路径：

<script setup lang="ts">
import { route } from '@/utils/adonisRoute'

// 生成路径为 /posts/10/comments/25
const commentUrl = route('posts.comments.show', { postId: 10, commentId: 25 })
</script>

<template>
  <RouterLink :to="commentUrl">查看评论详情</RouterLink>
</template>

生产环境优化提示：你可以在AdonisJS构建阶段执行指令将路由清单导出为静态JSON文件，打包到前端产物中，无需每次应用启动都拉取接口，进一步提升加载性能。

内容的提问来源于stack exchange，提问作者Samson Maosa