Skip to content

路由

路由配置概述

项目使用Nuxt.js 3的路由系统,基于Vue Router构建。

主路由配置 (app/pages/routes.ts)

主路由配置文件定义了项目的核心路由结构,采用数组方式组织,每个路由项包含路径、组件和元信息。

typescript
export default [
    {
        path: "/",
        component: () => import('~/app/pages/index.vue')
    },
    {
        path: "/auth/login",
        component: () => import('~/app/pages/auth/login.vue'),
        meta: {
            layout: "container"
        }
    },
    {
        path: "/member",
        component: () => import('~/app/pages/member/index.vue'),
        meta: {
            middleware: ["auth"]
        }
    },
    // 其他路由...
]

路由选项配置 (app/router.options.ts)

路由选项配置文件扩展了基础路由系统,支持插件路由的动态加载和路由行为配置。

typescript
import type { RouterConfig } from '@nuxt/schema'
import routes from '@/app/pages/routes'

const addonRoutes = import.meta.globEager('@/addon/**/pages/routes.ts')

for (const key in addonRoutes) {
    const addon = key.split('/')[2]
    routes.push(...addonRoutes[key].default.map((item) => {
        item.meta = item.meta ? Object.assign(item.meta, { addon }) : { addon }
        return item
    }))
}

// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterConfig>{
    routes: (_routes) => routes,
    strict: false
}

基于 MIT 协议发布