@fruit-ui/router 1.1.2 → 1.1.4
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 +19 -10
- package/package.json +1 -1
- package/src/router.js +6 -2
package/README.md
CHANGED
|
@@ -17,20 +17,29 @@ Here is an example router:
|
|
|
17
17
|
```js
|
|
18
18
|
import * as router from "@fruit-ui/router";
|
|
19
19
|
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
20
|
+
const myRouter = router.Router(
|
|
21
|
+
{
|
|
22
|
+
'': {route: () => HomePage},
|
|
23
|
+
'about': {route: () => AboutPage},
|
|
24
|
+
'contact': {route: () => ContactPage},
|
|
25
|
+
'*': {route: (path) => ({
|
|
26
|
+
children: [
|
|
27
|
+
{tag: 'h2', children: '404'},
|
|
28
|
+
{tag: 'p', children: `The page "${path}" does not exist.`}
|
|
29
|
+
]
|
|
30
|
+
})}
|
|
31
|
+
}, {
|
|
32
|
+
hashed: {behavior: 'smooth'},
|
|
33
|
+
unhashed: {behavior: 'smooth', to: {x: 0, y: 0}}
|
|
34
|
+
}
|
|
35
|
+
);
|
|
29
36
|
```
|
|
30
37
|
|
|
31
38
|
## The `navigate` function
|
|
32
39
|
|
|
33
|
-
The `navigate` function takes in a path and navigates to that path. Navigation is done with `history.pushState` so it is compatible with the browser forward/back methods. You can navigate to hashed paths (i.e., `navigate('/about#contact')`) to automatically scroll to a certain element ID, depending on scroll settings.
|
|
40
|
+
The `navigate` function takes in a path and navigates to that path. Navigation is done with `history.pushState` so it is compatible with the browser forward/back methods. You can navigate to hashed paths (i.e., `navigate('/about#contact')`) to automatically scroll to a certain element ID, depending on scroll settings.
|
|
41
|
+
|
|
42
|
+
`navigate` also takes an optional object `searchParams` representing any other search params to be used.
|
|
34
43
|
|
|
35
44
|
### The `navigateHash` function
|
|
36
45
|
|
package/package.json
CHANGED
package/src/router.js
CHANGED
|
@@ -127,17 +127,21 @@ function Router(routes, scrollOptions = {hashed: {}, unhashed: {to: {x: 0, y: 0}
|
|
|
127
127
|
/**
|
|
128
128
|
* Navigates to a page.
|
|
129
129
|
* @param {string} page - the page.
|
|
130
|
+
* @param {Object.<string, string>} [searchParams] - other search params.
|
|
130
131
|
*/
|
|
131
|
-
function navigate(page) {
|
|
132
|
+
function navigate(page, searchParams = {}) {
|
|
132
133
|
if (page.startsWith('/')) page = page.slice(1);
|
|
133
134
|
let hash = '';
|
|
134
135
|
if (page.includes('#')) {
|
|
135
136
|
hash = page.slice(page.indexOf('#'));
|
|
136
137
|
page = page.slice(0, page.indexOf('#'));
|
|
137
138
|
}
|
|
138
|
-
if (page === getPage()) return;
|
|
139
139
|
const url = new URL(window.location.href);
|
|
140
|
+
url.search = '';
|
|
140
141
|
url.searchParams.set(PARAM_NAME, page);
|
|
142
|
+
Object.keys(searchParams).forEach(key => {
|
|
143
|
+
url.searchParams.set(key, searchParams[key]);
|
|
144
|
+
});
|
|
141
145
|
url.hash = hash;
|
|
142
146
|
window.history.pushState({}, '', url);
|
|
143
147
|
broadcastPageChange(page);
|