LCUI Router 是 LCUI 的官方路由管理器 - 文章教程

LCUI Router 是 LCUI 的官方路由管理器

发布于 2021-10-06 字数 2471 浏览 933 评论 0

LCUI Router 是 LCUI 的官方路由管理器。它和 LCUI 的核心深度集成,提供与 Vue Router 类似的开发体验,能让构建多视图的 LCUI 应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接

安装

Windows:

使用 LCPkg 安装:

lcpkg install github.com/lc-soft/lcui-router

Linux:

假设你已经能够熟练的手动编译源代码,那么你只需下载此项目的源代码然后复制到你的项目目录里,与你的项目源代码一同编译。

快速上手

注意: 我们将使用 lcui-cli 工具来管理路由的配置和源代码。

创建一个 LCUI 应用程序项目:

lcui create myapp
cd myapp

复制以下代码并覆盖到文件 app/assets/views/app.xml

<?xml version="1.0" encoding="UTF-8" ?>
<lcui-app>
  <resource type="text/css" src="assets/stylesheets/app.css"/>
  <ui>
    <w>
      <textview>Hello App!</textview>
      <w>
        <!-- 使用 router-link 部件用于导航 -->
        <!-- 通过 `to` 属性来指定链接 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </w>
      <!-- 路由出口 -->
      <!-- 与路由匹配的部件将会渲染在这里 -->
      <router-view />
    </w>
  </ui>
</lcui-app>

生成两个部件:

lcui generate widget foo
lcui generate widget bar

保存以下代码到文件 config/router.js:

module.exports = [
  { path: '/foo', component: 'foo' },
  { path: '/bar', component: 'bar' }
]

编译路由配置文件:

lcui compile router

运行应用程序:

lcpkg run start

如需更多示例,可查看 lcui-router-app 项目。

文档

LCUI Router 的设计参考自 Vue Router,因此,你可以通过阅读 Vue Router 的文档 来学习 LCUI Router 的简单用法。

项目地址:https://github.com/lc-soft/lcui-router

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
82839 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0