Important
This previously experiment is wrapped up, moving forward the development will happen at https://github.com/tinijs/tinijs/tree/main/packages/router.
If you want to use the experimental version still, please use the version 0.16.0.
The official router module for the TiniJS framework. It is currently under development.
Another option for adding routes to a TiniJS app is using @vaadin/router.
To manually install the module: npm i @tinijs/router@0.16.0
It is recommended to download the Skeleton for a ready-to-use structured project.
For more, please visit: https://tinijs.dev
- Add the
routes.ts
import {Route} from '@tinijs/router';
export default [
{
path: '',
component: 'app-layout-default',
children: [
{
path: '',
component: 'app-page-home',
action: () => import('./pages/home'),
},
{
path: 'articles/:slug',
component: 'app-page-article',
action: () => import('./pages/article'),
},
{
path: '**',
component: 'app-page-404',
action: () => import('./pages/404'),
},
],
},
] as Route[];- Register the routes in
app.ts
import {html} from 'lit';
import {TiniComponent, App} from '@tinijs/core';
import {createRouter, AppWithRouter} from '@tinijs/router';
import routes from './routes';
@App()
export class AppRoot extends TiniComponent implements AppWithRouter {
readonly router = createRouter(routes, {linkTrigger: true});
protected render() {
return html`<router-outlet .router=${this.router}></router-outlet>`;
}
}- Retrieve the routing context
import {TiniComponent, Page} from '@tinijs/core';
import {
Router,
ActivatedRoute,
UseRouter,
UseRoute,
UseParams
} from '@tinijs/router';
interface PageParams {
slug: string;
}
@Page({
name: 'page-article',
})
export class ArticlePage extends TiniComponent {
// router instance
@UseRouter() router!: Router;
// current route
@UseRoute() route!: ActivatedRoute;
// route params
@UseParams() params!: PageParams;
}Lifecycle hooks are used to perform actions when a route is activated or deactivated:
onBeforeEnter: called when the route is about to be activatedonAfterEnter: called when the route is activatedonBeforeLeave: called when the route is about to be deactivatedonAfterLeave: called when the route is deactivated
You can intercept the navigation process by returning a string or a function from the onBeforeEnter and onBeforeLeave hook:
nullish: continue the navigation processstring: cancel and redirect to the pathfunction: cancel and execute the function
import {TiniComponent, Page} from '@tinijs/core';
import {OnBeforeEnter} from '@tinijs/router';
@Page({
name: 'page-user',
})
export class UserPage extends TiniComponent implements OnBeforeEnter {
onBeforeEnter() {
if (user) return; // continue
return '/login'; // redirect to login page
}
}// TODO
- Create a home for TiniJS:
mkdir TiniJS && cd TiniJS - Fork the repo
- Install dependencies:
cd router && npm i - Make changes & preview locally:
npm run build && npm pack - Push changes & create a PR 👌
@tinijs/router is released under the MIT license.