Skip to content

Commit 9ea7439

Browse files
kieranwvkieranwv
committed
feat: add multiple route params example
1 parent f30f908 commit 9ea7439

File tree

10 files changed

+1955
-2284
lines changed

10 files changed

+1955
-2284
lines changed

‎package.json‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -23,47 +23,47 @@
2323
"release": "bumpp"
2424
},
2525
"dependencies": {
26-
"@iconify-json/carbon": "^1.2.5",
26+
"@iconify-json/carbon": "^1.2.8",
2727
"@iconify-json/logos": "^1.2.4",
28-
"@unhead/vue": "^1.11.14",
29-
"@unocss/reset": "^0.65.3",
30-
"@vueuse/core": "^12.2.0",
31-
"axios": "^1.7.9",
28+
"@unhead/vue": "^1.11.20",
29+
"@unocss/reset": "66.1.0-beta.3",
30+
"@vueuse/core": "^12.7.0",
31+
"axios": "^1.8.1",
3232
"lodash-es": "^4.17.21",
3333
"nprogress": "^0.2.0",
34-
"pinia": "^2.3.0",
34+
"pinia": "^3.0.1",
3535
"vue": "^3.5.13",
36-
"vue-i18n": "^10.0.5",
36+
"vue-i18n": "^11.1.1",
3737
"vue-router": "^4.5.0"
3838
},
3939
"devDependencies": {
40-
"@antfu/eslint-config": "^3.12.1",
40+
"@antfu/eslint-config": "^4.3.0",
4141
"@intlify/unplugin-vue-i18n": "^6.0.3",
4242
"@types/jsdom": "^21.1.7",
4343
"@types/lodash-es": "^4.17.12",
44-
"@types/node": "^22.10.2",
44+
"@types/node": "^22.13.8",
4545
"@types/nprogress": "^0.2.3",
4646
"@vitejs/plugin-vue": "^5.2.1",
4747
"@vitejs/plugin-vue-jsx": "^4.1.1",
4848
"@vue/test-utils": "^2.4.6",
49-
"bumpp": "^9.9.2",
50-
"eslint": "^9.17.0",
51-
"jsdom": "^25.0.1",
52-
"lint-staged": "^15.3.0",
49+
"bumpp": "^10.0.3",
50+
"eslint": "^9.21.0",
51+
"jsdom": "^26.0.0",
52+
"lint-staged": "^15.4.3",
5353
"npm-run-all2": "^7.0.2",
5454
"rimraf": "^6.0.1",
5555
"simple-git-hooks": "^2.11.1",
56-
"typescript": "^5.7.2",
57-
"unocss": "^0.65.3",
58-
"unplugin-auto-import": "^0.19.0",
59-
"unplugin-vue-components": "^0.28.0",
60-
"unplugin-vue-router": "^0.10.9",
61-
"vite": "^6.0.6",
56+
"typescript": "^5.8.2",
57+
"unocss": "66.1.0-beta.3",
58+
"unplugin-auto-import": "^19.1.1",
59+
"unplugin-vue-components": "^28.4.1",
60+
"unplugin-vue-router": "^0.11.2",
61+
"vite": "^6.2.0",
6262
"vite-plugin-compression2": "^1.3.3",
63-
"vite-plugin-vue-devtools": "^7.6.8",
63+
"vite-plugin-vue-devtools": "^7.7.2",
6464
"vite-plugin-vue-layouts": "^0.11.0",
65-
"vitest": "^2.1.8",
66-
"vue-tsc": "^2.2.0"
65+
"vitest": "^3.0.7",
66+
"vue-tsc": "^2.2.8"
6767
},
6868
"simple-git-hooks": {
6969
"pre-commit": "pnpm lint-staged"

‎pnpm-lock.yaml‎

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

‎src/components/TheInput.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts" setup>
2+
const inputValue = defineModel('inputValue', {
3+
type: String,
4+
default: '',
5+
})
6+
</script>
7+
8+
<template>
9+
<input v-model="inputValue" type="text">
10+
</template>
11+
12+
<style scoped>
13+
input {
14+
border: 1px solid #ccc;
15+
padding: 5px;
16+
font-size: 16px;
17+
border-radius: 4px;
18+
}
19+
</style>

‎src/locales/en.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
"not-found": {
1414
"title": "Page Not Found",
1515
"content": "Sorry, the page you visited does not exist."
16+
},
17+
"dynamic": {
18+
"description": "Read more about dynamic routing in the",
19+
"multiple-route-params": "Multiple Route Params"
1620
}
1721
},
1822
"button": {
@@ -25,7 +29,8 @@
2529
"toggle-logo-description": "State management based on Pinia",
2630
"axios-request": "Request with Axios",
2731
"dynamic-route": "Dynamic Route",
28-
"dynamic-route-description": "File-based dynamic routing"
32+
"dynamic-route-description": "File-based dynamic routing",
33+
"jump": "Jump"
2934
},
3035
"empty": "No content"
3136
}

‎src/locales/zh.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
"not-found": {
1515
"title": "未找到页面",
1616
"content": "抱歉，您访问的页面不存在。"
17+
},
18+
"dynamic": {
19+
"description": "了解更多关于动态路由的信息",
20+
"multiple-route-params": "多层路由参数"
1721
}
1822
},
1923
"button": {
@@ -26,7 +30,8 @@
2630
"toggle-logo-description": "基于 Pinia 的状态管理",
2731
"axios-request": "使用 Axios 发起请求",
2832
"dynamic-route": "动态路由",
29-
"dynamic-route-description": "基于文件的动态路由"
33+
"dynamic-route-description": "基于文件的动态路由",
34+
"jump": "跳转"
3035
},
3136
"empty": "暂无内容"
3237
}

‎src/pages/dynamic/[id].[params].vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<route lang="json">
2+
{
3+
"name": "dynamic-params",
4+
"meta": {
5+
"layout": "page"
6+
}
7+
}
8+
</route>
9+
10+
<script lang="ts" setup>
11+
import type { RouteLocationNormalizedLoaded } from 'vue-router/auto'
12+
13+
const { t } = useI18n()
14+
15+
const { back } = useBack()
16+
17+
const route = useRoute() as RouteLocationNormalizedLoaded<'dynamic-params'>
18+
19+
const title = computed(() => {
20+
return route.params.params
21+
})
22+
23+
useHead({
24+
title,
25+
})
26+
</script>
27+
28+
<template>
29+
<TheCard>
30+
<h2 text-center text-lg font-bold mb-5>
31+
Params: {{ route.params }}
32+
</h2>
33+
<TheButton mx-auto mt-4 @click="back()">
34+
<i i-carbon-return mr-2 />
35+
<span> {{ t('button.back') }}</span>
36+
</TheButton>
37+
</TheCard>
38+
</template>

‎src/pages/dynamic/[id].vue‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ const { t } = useI18n()
1414
1515
const { back } = useBack()
1616
17+
const router = useRouter()
18+
1719
const route = useRoute() as RouteLocationNormalizedLoaded<'dynamic'>
1820
1921
const title = computed(() => {
@@ -23,15 +25,25 @@ const title = computed(() => {
2325
useHead({
2426
title,
2527
})
28+
29+
const params = ref('')
30+
31+
function jump() {
32+
if (params.value) {
33+
router.push({
34+
path: `/dynamic/${route.params.id}/${params.value}`,
35+
})
36+
}
37+
}
2638
</script>
2739

2840
<template>
29-
<TheCard>
41+
<TheCard my-5>
3042
<h2 text-center text-lg font-bold mb-5>
3143
Hi, {{ route.params.id }}
3244
</h2>
3345
<p>
34-
Read more about dynamic routing in the
46+
{{ t('page.dynamic.description') }}
3547
<a target="_blank" href="https://uvr.esm.is/guide/file-based-routing.html#dynamic-routes">
3648
https://uvr.esm.is/guide/file-based-routing.html#dynamic-routes
3749
</a>
@@ -41,4 +53,15 @@ useHead({
4153
<span> {{ t('button.back') }}</span>
4254
</TheButton>
4355
</TheCard>
56+
<TheCard my-5>
57+
<h2 text-center text-lg font-bold mb-5>
58+
{{ t('page.dynamic.multiple-route-params') }}
59+
</h2>
60+
<p>
61+
<TheInput v-model="params" />
62+
</p>
63+
<TheButton mx-auto mt-4 @click="jump()">
64+
<span> {{ t('button.jump') }}</span>
65+
</TheButton>
66+
</TheCard>
4467
</template>

‎typings/auto-imports.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ declare global {
7979
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
8080
const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
8181
const onDeactivated: typeof import('vue')['onDeactivated']
82+
const onElementRemoval: typeof import('@vueuse/core')['onElementRemoval']
8283
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
8384
const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
8485
const onLongPress: typeof import('@vueuse/core')['onLongPress']
@@ -168,6 +169,7 @@ declare global {
168169
const useCloned: typeof import('@vueuse/core')['useCloned']
169170
const useColorMode: typeof import('@vueuse/core')['useColorMode']
170171
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
172+
const useCountdown: typeof import('@vueuse/core')['useCountdown']
171173
const useCounter: typeof import('@vueuse/core')['useCounter']
172174
const useCssModule: typeof import('vue')['useCssModule']
173175
const useCssVar: typeof import('@vueuse/core')['useCssVar']
@@ -253,13 +255,15 @@ declare global {
253255
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
254256
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
255257
const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
258+
const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
256259
const usePrevious: typeof import('@vueuse/core')['usePrevious']
257260
const useRafFn: typeof import('@vueuse/core')['useRafFn']
258261
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
259262
const useRequest: typeof import('../src/composables/request')['useRequest']
260263
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
261264
const useRoute: typeof import('vue-router')['useRoute']
262265
const useRouter: typeof import('vue-router')['useRouter']
266+
const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
263267
const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
264268
const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
265269
const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -418,6 +422,7 @@ declare module 'vue' {
418422
readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
419423
readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
420424
readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
425+
readonly onElementRemoval: UnwrapRef<typeof import('@vueuse/core')['onElementRemoval']>
421426
readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
422427
readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
423428
readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
@@ -507,6 +512,7 @@ declare module 'vue' {
507512
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
508513
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
509514
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
515+
readonly useCountdown: UnwrapRef<typeof import('@vueuse/core')['useCountdown']>
510516
readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
511517
readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
512518
readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
@@ -592,13 +598,15 @@ declare module 'vue' {
592598
readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
593599
readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
594600
readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
601+
readonly usePreferredReducedTransparency: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedTransparency']>
595602
readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
596603
readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
597604
readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
598605
readonly useRequest: UnwrapRef<typeof import('../src/composables/request')['useRequest']>
599606
readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
600607
readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
601608
readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
609+
readonly useSSRWidth: UnwrapRef<typeof import('@vueuse/core')['useSSRWidth']>
602610
readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
603611
readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
604612
readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>

‎typings/components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// @ts-nocheck
33
// Generated by unplugin-vue-components
44
// Read more: https://github.com/vuejs/core/pull/3399
5+
// biome-ignore lint: disable
56
export {}
67

78
/* prettier-ignore */
@@ -11,5 +12,6 @@ declare module 'vue' {
1112
RouterView: typeof import('vue-router')['RouterView']
1213
TheButton: typeof import('./../src/components/TheButton.vue')['default']
1314
TheCard: typeof import('./../src/components/TheCard.vue')['default']
15+
TheInput: typeof import('./../src/components/TheInput.vue')['default']
1416
}
1517
}

‎typings/vue-router.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,6 @@ declare module 'vue-router/auto-routes' {
2222
'not-found': RouteRecordInfo<'not-found', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
2323
'about': RouteRecordInfo<'about', '/about', Record<never, never>, Record<never, never>>,
2424
'dynamic': RouteRecordInfo<'dynamic', '/dynamic/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
25+
'dynamic-params': RouteRecordInfo<'dynamic-params', '/dynamic/:id/:params', { id: ParamValue<true>, params: ParamValue<true> }, { id: ParamValue<false>, params: ParamValue<false> }>,
2526
}
2627
}

0 commit comments

Comments
 (0)