ui-router

lcui-router

(English/中文)

Introduction

LCUI Router is the official router for LCUI. It provides a similar development experience to the Vue Router and make building multiple views applications with LCUI a breeze. Features include:

• Nested route/view mapping
• Modular, component-based router configuration
• Route params, query, wildcards
• Fine-grained navigation control
• Links with automatic active CSS classes

Getting Started

Note: We will using lcui-cli tool to manage the configuration and source code for the router.

Create an LCUI application project:

lcui create myapp
cd myapp

Overwrite the following code to the file 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>
        <!-- use router-link component for navigation. -->
        <!-- specify the link by passing the `to` prop. -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </w>
      <!-- route outlet -->
      <!-- component matched by the route will render here -->
      <router-view />
    </w>
  </ui>
</lcui-app>

Generate two widgets:

lcui generate widget foo
lcui generate widget bar

Save following code as file config/router.js:

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

Compile config file for router:

lcui compile router

Run app:

lcpkg run start

For more examples, please see the lcui-router-app project.

Documentation

LCUI Router is referenced from Vue Router, so you can read the Vue Router documentation to learn about the basic usage of LCUI Router.

License

MIT licensed.