Joker Router

@joker.front/router serves as the core routing component within the Joker front-end framework. It plays a crucial role in handling the navigation and URL management of web applications.

How To Use

To utilize the @joker.front/router in your application, you can follow these steps:

import { Router } from "@joker.front/router";

// Create a new instance of the Router and configure it with necessary options
new Router({
    // Set the logger level. In this case, it is set to "info", which can be used to log routing-related information at an appropriate level for debugging and monitoring purposes.
    loggerLeve: "info",
    // Define the route configurations. Each route object contains properties such as 'path' and 'component'.
    // The 'path' specifies the URL path, and 'component' indicates the corresponding component to be rendered when that path is accessed.
    // Here, we have a root route ("/") that redirects to "/a". The "/a" route has its own component 'a' and can have child routes.
    // The child routes of "/a" are defined within the 'children' array. For example, an empty path "" within the children of "/a" maps to the component 'a1', and the path "a2" maps to the component 'a2'.
    routes: [
        { path: "/", redirect: "/a" },
        {
            path: "/a",
            component: a,
            children: [
                { path: "", component: a1 },
                { path: "a2", component: a2 }
            ]
        }
    ]
});

Within a component, you can access and manipulate routing information by reading the router property:

import { router } from "@joker.front/router";

export default class extends Component {
    test() {
        // Navigate to a new route. In this example, it redirects to the route with the path "b".
        // This is useful when you want to perform a programmatic navigation, such as after a certain action or condition is met.
        router.push({
            path: "b"
        });

        // Go back to the previous route. This mimics the behavior of the browser's back button and can be used to provide a seamless user experience when navigating back in the application's history.
        router.back();

        // Retrieve the current route information. The 'value' property holds the details of the currently active route, which can be used for various purposes, such as conditional rendering or performing actions based on the current route.
        router.route.value;
    }
}

Documentation

Official Website

Help Docs

Low-Code Platform

Joker Router

@joker.front/router是 Joker 前端框架的核心路由组件，在 Web 应用的导航和 URL 管理方面起着关键作用。

如何使用

在您的应用中使用@joker.front/router，可按以下步骤操作：

import { Router } from "@joker.front/router";

// 创建Router的新实例并配置必要的选项
new Router({
    // 设置日志级别。此处设为“info”，可用于在调试和监控时以合适的级别记录路由相关信息。
    loggerLeve: "info",
    // 定义路由配置。每个路由对象包含诸如“path”和“component”等属性。
    // “path”指定URL路径，“component”表示访问该路径时要渲染的对应组件。
    // 这里，我们有一个根路由（“/”），它重定向到“/a”。“/a”路由有自己的组件“a”，并且可以有子路由。
    // “/a”的子路由在“children”数组中定义。例如，“/a”的子路由中，空路径“”映射到组件“a1”，路径“a2”映射到组件“a2”。
    routes: [
        { path: "/", redirect: "/a" },
        {
            path: "/a",
            component: a,
            children: [
                { path: "", component: a1 },
                { path: "a2", component: a2 }
            ]
        }
    ]
});

在组件内部，可以通过读取router属性来获取和操作路由信息：

import { router } from "@joker.front/router";

export default class extends Component {
    test() {
        // 跳转到新路由。在此示例中，它重定向到路径为“b”的路由。
        // 当某个操作或条件满足后需要进行编程式导航时，这很有用。
        router.push({
            path: "b"
        });

        // 返回上一个路由。这模拟了浏览器的后退按钮行为，可在应用历史记录中后退时提供无缝的用户体验。
        router.back();

        // 获取当前路由信息。“value”属性保存当前活动路由的详细信息，可用于多种目的，如条件渲染或根据当前路由执行操作。
        router.route.value;
    }
}

文档

官网

帮助文档

低代码平台