Vue Routider
Make Vue Router type safe with a very similar API. (Not compatible with vue-router@3)
Installation
$ npm i vue@next vue-router@next vue-routider
Example
main.ts
import { createApp } from 'vue'import router from './router' const app = createApp(App)app.use(router)app.mount('#app')
router/index.ts
import { createWebHistory } from 'vue-router'import { createRoutider, createPath, createPaths } from 'vue-routider' const { router, useRouter, useRoute } = createRoutider({ history: createWebHistory(), routes: { Index: { path: '/', // use can just pass a string when it does not include params component: /* something */ }, // nested routes are supported Items: { path: '/items', component: /* something */, children: { Item: { path: createPath`${'id'}`, component: /* something */, children: { ItemDetail: { path: '/detail', component: /* something */ } } } } }, UserItem: { path: createPath`/users/${'userId'}/${'id'}`, component: /* something */ }, Users: { // use createPaths for alias paths (you can use an array if it does not include params) path: createPaths( createPath`/users/${'id'}`, createPath`/u/${'id'}` ), component: /* something */ } }}) export default routerexport { useRouter, useRoute }
pages/Item.vue
import { defineComponent } from 'vue'import { useRoute } from '../router' export default defineComponent({ setup() { const route = useRoute('Item') // here type of `route.params` will become `{ id: string | string[] }` }})
pages/Base.vue
import { defineComponent } from 'vue'import { useRoute } from '../router' export default defineComponent({ setup() { const route = useRoute(['Item', 'UserItem']) // here type of `route.params` will become `{ id: string | string[], userId?: string | string[] }` }})