@viewfly/router v1.0.0-alpha.1
Viewfly
Viewfly 是一个简单、数据驱动的前端框架。此项目为 Viewfly 的路由库,可让 Viewfly 支持浏览器路由。
安装
npm install @viewfly/router
使用示例
import { createApp } from '@viewfly/platform-browser'
import { RouterModule } from '@viewfly/router'
function ListTab1() {
return () => {
return (
<div>listTab1</div>
)
}
}
function ListTab2() {
return () => {
return (
<div>listTab2</div>
)
}
}
function ListTab3() {
return () => {
return (
<div>listTab3</div>
)
}
}
function List() {
return () => {
return (
<div>
<h3>list</h3>
<div>
<Link active="active" to='./tab1'>tab1</Link>
<Link active="active" to='./tab2'>tab2</Link>
<Link active="active" to='./tab3'>tab3</Link>
</div>
<div>
<RouterOutlet config={[
{
name: 'tab1',
component: ListTab1
},
{
name: 'tab2',
component: ListTab2
},
{
name: 'tab3',
component: ListTab3
}
]}>没找到 Tab</RouterOutlet>
</div>
</div>
)
}
}
function Detail() {
return () => {
return (
<div>detail</div>
)
}
}
function Home() {
const router = inject(Router)
return () => {
return (
<div>
<div>home</div>
<button type="button" onClick={() => {
router.navigateTo('../list')
}
}>跳转到列表
</button>
</div>
)
}
}
function App() {
return () => {
return (
<div>
<div>
<Link active="active" exact to="/">Home</Link>
<Link active="active" to="/list" queryParams={{ a: 'xx' }}>List</Link>
<Link active="active" to="/detail">Detail</Link>
</div>
<div>
<RouterOutlet config={[
{
name: 'home',
component: Home
},
{
name: 'list',
asyncComponent: () => Promise.resolve().then(() => List)
},
{
name: 'detail',
component: Detail
}
]}>
未匹配到任何路由
</RouterOutlet>
</div>
</div>
)
}
}
createApp(<App/>)use(new RouterModule()).mount(document.getElementById('app')!)
完整文档请参考官方网站:viewfly.org
4 days ago
5 days ago
11 days ago
12 days ago
15 days ago
4 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago