@viewfly/router

Languages: English

基于 Viewfly 的浏览器端路由：声明式链接、嵌套路由出口、编程式导航等。需配合 @viewfly/core 与 @viewfly/platform-browser 使用。

安装

npm install @viewfly/router @viewfly/platform-browser @viewfly/core

接入应用

1. 使用 RouterModule 作为应用级扩展（通过 createApp(...).use(...) 注册）。
2. 在布局中用 Link 生成导航，用 RouterOutlet 根据配置渲染匹配到的组件。
3. 在组件内通过 inject(Router) 拿到路由实例，调用 navigateTo(path, queryParams?, hash?) / replaceTo 做跳转（第二参为查询对象，与 path 上的 Router.params / useParams() 区分）。

最小串联示例（节选；完整路由表、懒加载等请结合类型定义与本包源码中的 RouterModule / RouterOutlet 用法扩展）：

import { inject } from '@viewfly/core'
import { createApp } from '@viewfly/platform-browser'
import { Link, Router, RouterModule, RouterOutlet } from '@viewfly/router'

function Home() {
  const router = inject(Router)
  return () => (
    <div>
      <p>Home</p>
      <button type="button" onClick={() => router.navigateTo('/list')}>去列表</button>
    </div>
  )
}

function List() {
  return () => <div>List</div>
}

function App() {
  return () => (
    <div>
      <nav>
        <Link active="active" exact to="/">Home</Link>
        <Link active="active" to="/list">List</Link>
      </nav>
      <RouterOutlet>
        未匹配到路由
      </RouterOutlet>
    </div>
  )
}

createApp(<App/>).use(new RouterModule({
  routes: [
    { path: '', component: Home },
    { path: 'list', component: List }
  ]
})).mount(document.querySelector('#main')!)

嵌套路由：在子页面组件内再次放置 RouterOutlet，并为其传入子级 config。

文档

• 官方文档：https://viewfly.org/guide/router（路由接入与常见用法）。
• @viewfly/router 类型定义（补充 API 参数与返回值细节）。

License

MIT