Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork9
A type safe router for vuejs
License
kitbagjs/router
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Type safe router for Vue.js
Get Started with ourdocumentation or ourintro video
# bunbun add @kitbag/router# yarnyarn add @kitbag/router# npmnpm install @kitbag/router
Create an array of possible routes. Learn more aboutdefining routes.
// /routes.tsimport{createRoute}from'@kitbag/router'constHome={template:'<div>Home</div>'}constAbout={template:'<div>About</div>'}exportconstroutes=[createRoute({name:'home',path:'/',component:Home}),createRoute({name:'path',path:'/about',component:About}),]asconst
Create a router instance and pass it to the app as a plugin
import{createApp}from'vue'import{createRouter}from'@kitbag/router'import{routes}from'/routes'importAppfrom'./App.vue'constrouter=createRouter(routes)constapp=createApp(App)app.use(router)app.mount('#app')
This block utilizesdeclaration merging to provide the internal types to match the actual router you're using. You put this in main.ts right after you callcreateRouter, or you can export your router and put this interface inside of arouter.d.ts file, anywhere that your tsconfig can find it.
declare module'@kitbag/router'{interfaceRegister{router:typeofrouter}}
To navigate to another route, you can userouter.push. This method will update the URL for the browser and also add the URL into the history so when a user uses the back button on their browser it will behave as expected.
import{defineAsyncComponent}from'vue'import{createRoute,useRouter}from'@kitbag/router'constuser=createRoute({name:'user',path:'/user',component:defineAsyncComponent(()=>import('./UserPage.vue')),})constprofile=createRoute({parent:user,name:'profile',path:'/profile',component:defineAsyncComponent(()=>import('./ProfilePage.vue')),})constsettings=createRoute({parent:user,name:'settings',path:'/settings',component:defineAsyncComponent(()=>import('./SettingsPage.vue')),})constrouter=useRouter([user,profile,settings])router.push('settings')
The push method also accepts a plain string if you know the URL you want to go to.
router.push('/user/settings')router.push('https://github.com/kitbagjs/router')
Thissource argument is type safe, expecting either aUrl or a valid routename. URL is any string that starts with "http", "https", or a forward slash "/". Additionally if using the route name, push will require params be passed in if there are any.
If you only wish to change the params on the current route you can userouter.route.update.
router.route.update('myParam',123)
or for setting multiple params at once
router.route.update({myParam:123,tab:'github',})
Give your route components a place to be mounted
<!-- App.vue --><divclass="app"> ...<!-- matched route.component gets rendered here --><router-view/></div>
This component can be mounted anywhere you want route components to be mounted. Nested routes can also have a nestedRouterView which would be responsible for rendering any children that route may have. Read more aboutnested routes.
Use RouterLink for navigating between routes.
<template> ...<!-- router-link renders as <a> with href --><router-link:to="(resolve) => resolve('home')">Go somewhere</router-link></template>
This component gives the router the power to change the URL without reloading the page.
About
A type safe router for vuejs
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors7
Uh oh!
There was an error while loading.Please reload this page.