Skip to content

Commit cac24b9

Browse files
InsHomePgupInsHomePgup
committed
feat: Add support for file-based routing (#53)
1 parent e40e405 commit cac24b9

File tree

7 files changed

+258
-42
lines changed

7 files changed

+258
-42
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"unocss": "^0.58.0",
6161
"unplugin-auto-import": "^0.17.2",
6262
"unplugin-vue-components": "^0.26.0",
63+
"unplugin-vue-router": "^0.7.0",
6364
"vite": "^5.0.10",
6465
"vite-plugin-mock-dev-server": "^1.4.3",
6566
"vite-plugin-vconsole": "^2.0.1",

‎pnpm-lock.yaml

Lines changed: 89 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/auto-imports.d.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ declare global {
1717
const customRef: typeof import('vue')['customRef']
1818
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
1919
const defineComponent: typeof import('vue')['defineComponent']
20+
const defineLoader: typeof import('vue-router/auto')['defineLoader']
21+
const definePage: typeof import('unplugin-vue-router/runtime')['_definePage']
2022
const describe: typeof import('vitest')['describe']
2123
const effectScope: typeof import('vue')['effectScope']
2224
const expect: typeof import('vitest')['expect']
@@ -33,8 +35,8 @@ declare global {
3335
const nextTick: typeof import('vue')['nextTick']
3436
const onActivated: typeof import('vue')['onActivated']
3537
const onBeforeMount: typeof import('vue')['onBeforeMount']
36-
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
37-
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
38+
const onBeforeRouteLeave: typeof import('vue-router/auto')['onBeforeRouteLeave']
39+
const onBeforeRouteUpdate: typeof import('vue-router/auto')['onBeforeRouteUpdate']
3840
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
3941
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
4042
const onDeactivated: typeof import('vue')['onDeactivated']
@@ -65,9 +67,9 @@ declare global {
6567
const useAttrs: typeof import('vue')['useAttrs']
6668
const useCssModule: typeof import('vue')['useCssModule']
6769
const useCssVars: typeof import('vue')['useCssVars']
68-
const useLink: typeof import('vue-router')['useLink']
69-
const useRoute: typeof import('vue-router')['useRoute']
70-
const useRouter: typeof import('vue-router')['useRouter']
70+
const useLink: typeof import('vue-router/auto')['useLink']
71+
const useRoute: typeof import('vue-router/auto')['useRoute']
72+
const useRouter: typeof import('vue-router/auto')['useRouter']
7173
const useSlots: typeof import('vue')['useSlots']
7274
const vi: typeof import('vitest')['vi']
7375
const vitest: typeof import('vitest')['vitest']

‎src/router/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
## File-based Routing
2+
3+
Routes will be auto-generated for Vue files in the **src/views** dir with the same file structure.
4+
Check out [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) for more details.

‎src/router/index.ts

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,12 @@
11
// https://router.vuejs.org/zh/
2-
import { createRouter, createWebHistory } from 'vue-router'
2+
3+
import { createRouter, createWebHistory } from 'vue-router/auto'
34
import NProgress from 'nprogress'
45
import 'nprogress/nprogress.css'
56

6-
// 导入路由组件
7-
import main from '@/views/index.vue'
8-
import mock from '@/views/mock/index.vue'
9-
import charts from '@/views/charts/index.vue'
10-
import unocss from '@/views/unocss/index.vue'
11-
127
NProgress.configure({ showSpinner: true, parent: '#app' })
13-
14-
// 定义路由，每个路由都需要映射到一个组件
15-
const routes = [
16-
{
17-
path: '/',
18-
name: 'main',
19-
component: main,
20-
},
21-
{
22-
path: '/mock',
23-
name: 'mock',
24-
component: mock,
25-
},
26-
{
27-
path: '/charts',
28-
name: 'charts',
29-
component: charts,
30-
},
31-
{
32-
path: '/unocss',
33-
name: 'unocss',
34-
component: unocss,
35-
},
36-
]
37-
38-
// 创建路由实例并传递 `routes` 配置
398
const router = createRouter({
409
history: createWebHistory(import.meta.env.VITE_APP_PUBLIC_PATH),
41-
routes,
4210
})
4311

4412
router.beforeEach((_to, _from, next) => {

‎src/typed-router.d.ts

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
/* eslint-disable */
2+
/* prettier-ignore */
3+
// @ts-nocheck
4+
// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
5+
// It's recommended to commit this file.
6+
// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
7+
8+
/// <reference types="unplugin-vue-router/client" />
9+
10+
import type {
11+
// type safe route locations
12+
RouteLocationTypedList,
13+
RouteLocationResolvedTypedList,
14+
RouteLocationNormalizedTypedList,
15+
RouteLocationNormalizedLoadedTypedList,
16+
RouteLocationAsString,
17+
RouteLocationAsRelativeTypedList,
18+
RouteLocationAsPathTypedList,
19+
20+
// helper types
21+
// route definitions
22+
RouteRecordInfo,
23+
ParamValue,
24+
ParamValueOneOrMore,
25+
ParamValueZeroOrMore,
26+
ParamValueZeroOrOne,
27+
28+
// vue-router extensions
29+
_RouterTyped,
30+
RouterLinkTyped,
31+
RouterLinkPropsTyped,
32+
NavigationGuard,
33+
UseLinkFnTyped,
34+
35+
// data fetching
36+
_DataLoader,
37+
_DefineLoaderOptions,
38+
} from 'unplugin-vue-router/types'
39+
40+
declare module 'vue-router/auto/routes' {
41+
export interface RouteNamedMap {
42+
'/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
43+
'/charts/': RouteRecordInfo<'/charts/', '/charts', Record<never, never>, Record<never, never>>,
44+
'/mock/': RouteRecordInfo<'/mock/', '/mock', Record<never, never>, Record<never, never>>,
45+
'/unocss/': RouteRecordInfo<'/unocss/', '/unocss', Record<never, never>, Record<never, never>>,
46+
}
47+
}
48+
49+
declare module 'vue-router/auto' {
50+
import type { RouteNamedMap } from 'vue-router/auto/routes'
51+
52+
export type RouterTyped = _RouterTyped<RouteNamedMap>
53+
54+
/**
55+
* Type safe version of `RouteLocationNormalized` (the type of `to` and `from` in navigation guards).
56+
* Allows passing the name of the route to be passed as a generic.
57+
*/
58+
export type RouteLocationNormalized<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedTypedList<RouteNamedMap>[Name]
59+
60+
/**
61+
* Type safe version of `RouteLocationNormalizedLoaded` (the return type of `useRoute()`).
62+
* Allows passing the name of the route to be passed as a generic.
63+
*/
64+
export type RouteLocationNormalizedLoaded<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
65+
66+
/**
67+
* Type safe version of `RouteLocationResolved` (the returned route of `router.resolve()`).
68+
* Allows passing the name of the route to be passed as a generic.
69+
*/
70+
export type RouteLocationResolved<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationResolvedTypedList<RouteNamedMap>[Name]
71+
72+
/**
73+
* Type safe version of `RouteLocation` . Allows passing the name of the route to be passed as a generic.
74+
*/
75+
export type RouteLocation<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationTypedList<RouteNamedMap>[Name]
76+
77+
/**
78+
* Type safe version of `RouteLocationRaw` . Allows passing the name of the route to be passed as a generic.
79+
*/
80+
export type RouteLocationRaw<Name extends keyof RouteNamedMap = keyof RouteNamedMap> =
81+
| RouteLocationAsString<RouteNamedMap>
82+
| RouteLocationAsRelativeTypedList<RouteNamedMap>[Name]
83+
| RouteLocationAsPathTypedList<RouteNamedMap>[Name]
84+
85+
/**
86+
* Generate a type safe params for a route location. Requires the name of the route to be passed as a generic.
87+
*/
88+
export type RouteParams<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['params']
89+
/**
90+
* Generate a type safe raw params for a route location. Requires the name of the route to be passed as a generic.
91+
*/
92+
export type RouteParamsRaw<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['paramsRaw']
93+
94+
export function useRouter(): RouterTyped
95+
export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
96+
97+
export const useLink: UseLinkFnTyped<RouteNamedMap>
98+
99+
export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
100+
export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
101+
102+
export const RouterLink: RouterLinkTyped<RouteNamedMap>
103+
export const RouterLinkProps: RouterLinkPropsTyped<RouteNamedMap>
104+
105+
// Experimental Data Fetching
106+
107+
export function defineLoader<
108+
P extends Promise<any>,
109+
Name extends keyof RouteNamedMap = keyof RouteNamedMap,
110+
isLazy extends boolean = false,
111+
>(
112+
name: Name,
113+
loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
114+
options?: _DefineLoaderOptions<isLazy>,
115+
): _DataLoader<Awaited<P>, isLazy>
116+
export function defineLoader<
117+
P extends Promise<any>,
118+
isLazy extends boolean = false,
119+
>(
120+
loader: (route: RouteLocationNormalizedLoaded) => P,
121+
options?: _DefineLoaderOptions<isLazy>,
122+
): _DataLoader<Awaited<P>, isLazy>
123+
124+
export {
125+
_definePage as definePage,
126+
_HasDataLoaderMeta as HasDataLoaderMeta,
127+
_setupDataFetchingGuard as setupDataFetchingGuard,
128+
_stopDataFetchingScope as stopDataFetchingScope,
129+
} from 'unplugin-vue-router/runtime'
130+
}
131+
132+
declare module 'vue-router' {
133+
import type { RouteNamedMap } from 'vue-router/auto/routes'
134+
135+
export interface TypesConfig {
136+
beforeRouteUpdate: NavigationGuard<RouteNamedMap>
137+
beforeRouteLeave: NavigationGuard<RouteNamedMap>
138+
139+
$route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
140+
$router: _RouterTyped<RouteNamedMap>
141+
142+
RouterLink: RouterLinkTyped<RouteNamedMap>
143+
}
144+
}

0 commit comments

Comments
 (0)