@kitbag/router 0.5.4 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -28
- package/dist/kitbag-router.d.ts +176 -304
- package/dist/kitbag-router.js +893 -927
- package/dist/kitbag-router.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,15 +30,15 @@ Create an array of possible routes. Learn more about [defining routes](https://k
|
|
|
30
30
|
|
|
31
31
|
```ts
|
|
32
32
|
// /routes.ts
|
|
33
|
-
import {
|
|
33
|
+
import { createRoute } from '@kitbag/router'
|
|
34
34
|
|
|
35
35
|
const Home = { template: '<div>Home</div>' }
|
|
36
36
|
const About = { template: '<div>About</div>' }
|
|
37
37
|
|
|
38
|
-
export const routes =
|
|
39
|
-
{ name: 'home', path: '/', component: Home },
|
|
40
|
-
{ name: 'path', path: '/about', component: About },
|
|
41
|
-
]
|
|
38
|
+
export const routes = [
|
|
39
|
+
createRoute({ name: 'home', path: '/', component: Home }),
|
|
40
|
+
createRoute({ name: 'path', path: '/about', component: About }),
|
|
41
|
+
]
|
|
42
42
|
```
|
|
43
43
|
|
|
44
44
|
## Plugin
|
|
@@ -75,29 +75,29 @@ declare module '@kitbag/router' {
|
|
|
75
75
|
To navigate to another route, you can use `router.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.
|
|
76
76
|
|
|
77
77
|
```ts
|
|
78
|
-
import {
|
|
79
|
-
|
|
80
|
-
const
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
78
|
+
import { createRoute, useRouter } from '@kitbag/router'
|
|
79
|
+
|
|
80
|
+
const user = createRoute({
|
|
81
|
+
name: 'user',
|
|
82
|
+
path: '/user',
|
|
83
|
+
component: ...,
|
|
84
|
+
})
|
|
85
|
+
|
|
86
|
+
const profile = createRoute({
|
|
87
|
+
parent: user,
|
|
88
|
+
name: 'profile',
|
|
89
|
+
path: '/profile',
|
|
90
|
+
component: ...,
|
|
91
|
+
})
|
|
92
|
+
|
|
93
|
+
const settings = createRoute({
|
|
94
|
+
parent: user,
|
|
95
|
+
name: 'settings',
|
|
96
|
+
path: '/settings',
|
|
97
|
+
component: ...,
|
|
98
|
+
})
|
|
99
99
|
|
|
100
|
-
const router = useRouter(
|
|
100
|
+
const router = useRouter([user, profile, settings])
|
|
101
101
|
|
|
102
102
|
router.push('user.settings')
|
|
103
103
|
```
|
|
@@ -109,7 +109,7 @@ router.push('/user/settings')
|
|
|
109
109
|
router.push('https://github.com/kitbagjs/router')
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
-
This `source` argument is type safe, expecting either a Url or a valid route "key". Url is any string that starts with "http", "https", or a forward slash "/". Route key is a string of route names joined by a period
|
|
112
|
+
This `source` argument is type safe, expecting either a Url or a valid route "key". Url is any string that starts with "http", "https", or a forward slash "/". Route key is a string of route names joined by a period `.`. Additionally if using the route key, push will require params be passed in if there are any.
|
|
113
113
|
|
|
114
114
|
## Update
|
|
115
115
|
|