@viewfly/router 3.0.1 → 3.0.2
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.en.md +80 -0
- package/README.md +2 -0
- package/package.json +2 -2
package/README.en.md
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# @viewfly/router
|
|
2
|
+
|
|
3
|
+
**Languages:** [简体中文](./README.md)
|
|
4
|
+
|
|
5
|
+
Browser routing for **Viewfly**: declarative links, nested outlets, programmatic navigation. Requires **`@viewfly/core`** and **`@viewfly/platform-browser`**.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @viewfly/router @viewfly/platform-browser @viewfly/core
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Wiring into the app
|
|
18
|
+
|
|
19
|
+
1. Register **`RouterModule`** at app level (`createApp(...).use(...)`).
|
|
20
|
+
2. Use **`Link`** for nav and **`RouterOutlet`** to render the matched view.
|
|
21
|
+
3. **`inject(Router)`** inside components, then **`navigateTo(path, queryParams?, hash?)`** / **`replaceTo`** — the second argument is the **query object** (distinct from path **`Router.params`** / **`useParams()`**).
|
|
22
|
+
|
|
23
|
+
Minimal sketch (extend with your route table, lazy loading, etc.):
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { inject } from '@viewfly/core'
|
|
27
|
+
import { createApp } from '@viewfly/platform-browser'
|
|
28
|
+
import { Link, Router, RouterModule, RouterOutlet } from '@viewfly/router'
|
|
29
|
+
|
|
30
|
+
function Home() {
|
|
31
|
+
const router = inject(Router)
|
|
32
|
+
return () => (
|
|
33
|
+
<div>
|
|
34
|
+
<p>Home</p>
|
|
35
|
+
<button type="button" onClick={() => router.navigateTo('/list')}>Go to list</button>
|
|
36
|
+
</div>
|
|
37
|
+
)
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function List() {
|
|
41
|
+
return () => <div>List</div>
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
function App() {
|
|
45
|
+
return () => (
|
|
46
|
+
<div>
|
|
47
|
+
<nav>
|
|
48
|
+
<Link active="active" exact to="/">Home</Link>
|
|
49
|
+
<Link active="active" to="/list">List</Link>
|
|
50
|
+
</nav>
|
|
51
|
+
<RouterOutlet>
|
|
52
|
+
No route matched
|
|
53
|
+
</RouterOutlet>
|
|
54
|
+
</div>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
createApp(<App/>).use(new RouterModule({
|
|
59
|
+
routes: [
|
|
60
|
+
{ path: '', component: Home },
|
|
61
|
+
{ path: 'list', component: List }
|
|
62
|
+
]
|
|
63
|
+
})).mount(document.querySelector('#main')!)
|
|
64
|
+
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
**Nested routes:** place another `RouterOutlet` in child layouts and pass nested route config.
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## Docs
|
|
72
|
+
|
|
73
|
+
- Official docs: <https://viewfly.org/guide/router>
|
|
74
|
+
- **`@viewfly/router`** typings.
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## License
|
|
79
|
+
|
|
80
|
+
MIT
|
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viewfly/router",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.2",
|
|
4
4
|
"description": "A routing library based on the Viewfly framework that can be run in the browser or Nodejs background.",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.esm.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"keywords": [],
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@tanbo/stream": "^1.2.4",
|
|
22
|
-
"@viewfly/core": "^3.0.
|
|
22
|
+
"@viewfly/core": "^3.0.2",
|
|
23
23
|
"url": "^0.11.4"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|