Routing
@thewebformula/lithe uses directory based routing. All routes go in a 'routes' folder.
app/
└── routes/
├── index/
│ └── index.js # /
├── 404/
│ └── index.js # /404 (or any url that is not found)
├── one/
│ └── index.js # one/
├── two[id?]/
│ └── index.js # two/:id?
├── three/
│ └── [id]/
│ └── index.js # three/:id
└── four/
└── [...all]/
└── index.js # four/*all (four/a/b/)
app/routes/index/index.js → /
app/routes/one/index.js → one
app/routes/two[id?]/index.js → two/:id?
app/routes/three/[id]/index.js → three/:id
app/routes/four/[...rest]/index.js →
four/*rest
Directory route details
routes/index/index.js Root page (/)
routes/404/index.js Not found page. Auto redirect on non
matching routes
index.js Route component file
[id] Directory that represents a url parameter
[id?] Directory that represents an options url parameter
name[id?] Inline url parameter to avoid sub folder
[...rest] Directory that represents catch-all route
[...rest?] Directory that represents optional catch-all
route
Page
Accessing url parameters
import { Component } from '@thewebformula/lithe';
import html from './page.html'; // automatically bundles
export default class extends Component {
// html page title
static title = 'Page';
// hook up imported html. Supports template literals (${this.someVar})
static htmlTemplate = html;
constructor() {
super();
}
connectedCallback() {
// one[id] one/:id one/value
console.log(this.urlParameters); // { id: 'value' }
// two[...rest] two/*rest two/a/b
console.log(this.urlParameters); // { rest: 'a/b' }
}
}