入门

路由导航使用支持 HTML 组件标签 和 JavaScript API 两种用法。请参考下面示例：

HTML 组件标签

vue

<!--使用 router-link 组件进行导航 -->
<kux-router-link class="mb-2" to="/pages/demo/pageCompInterceptor/pageCompInterceptor">
    <button type="primary">页面组件拦截示例</button>
</kux-router-link>

`kux-router-link`

该组件方便开发者们直接在 HTML 标签 中进行导航跳转，路由实例的所有导航守卫对该组件都生效。

提示

需要单独下载 kux-router-link 组件方可正常使用。

JavaScript API

由于新版的底层全面重构，所以在初始化的时候自动做了 pages.json 路由映射，会在项目根目录自动生成 pagesJsonRouter.uts 文件，方便创建路由实例时自动根据该映射配置创建 routes 路由池。具体操作如下：

项目根目录创建 router.uts 文件
项目根目录的 main.uts 全局挂载

router.utsmain.uts

import { pages } from '@/pagesJsonRouter';
import { RouteRecordNormalized } from '@/uni_modules/kux-router/utssdk/interface';
// 这个是全局 `store` 状态管理内容，可以根据自己的项目灵活引入使用。
import { state } from '@/store/index';

// 初始化路由池信息
let routes: RouteRecordNormalized[] = [];
// 遍历pages映射创建路由池信息
pages.map((item) => {
    switch (item.path) {
        case '/pages/p1/p1':
            routes.push({
                path: item.path,
                // name为可选，如果后面想通过该路由的名称跳转时记得要在这里传 `name`
                name: item.name,
                // query为可选，一般用来设置全局query参数的场景
                query: {
                    e: 1,
                    f: 2
                } as UTSJSONObject,
                redirect: (to): RouteRecordNormalized | null => {
                    // 测试判断是否登录
                    if (state.token1.length == 0) {
                        return {
                            name: 'PagesP1Login'
                        } as RouteRecordNormalized;
                    }

                    return null;
                }
            } as RouteRecordNormalized);
            break;
        case '/pages/demo/indexInterceptor/indexInterceptor':
            routes.push({
                path: item.path,
                name: item.name,
                // 测试未登录启动首页拦截
                beforeEnter: (async (to, from): Promise<any | null> => {
                    if (state.token3.length == 0) {
                        let s = 3;
                        let timer: number = 0;
                        timer = setInterval(() => {
                            if (s <= 0) {
                                clearInterval(timer);
                            } else {
                                uni.showToast({
                                    title: `${s}秒后自动拦截到登录页面`,
                                    icon: 'none',
                                    position: 'center'
                                });
                            }
                            s--;
                        }, 1000);
                        const delay = async (): Promise<number> => {
                            return new Promise<number>((resolve) => {
                                setTimeout(() => {
                                    resolve(0);
                                }, 5000);
                            })
                        }

                        await delay();

                        return {
                            name: 'PagesDemoIndexInterceptorLogin'
                        } as RouteRecordNormalized;
                    }

                    return null;
                }),
            } as RouteRecordNormalized);
            break;
        // 不需要做自定义导航守卫的记得要在这里获取映射配置内容并传给 `routes`
        default:
            routes.push({
                path: item.path,
                name: item.name
            } as RouteRecordNormalized);
    }
});

export default routes;

import App from './App.uvue'

import { createSSRApp } from 'vue'
import { createRouter } from '@/uni_modules/kux-router';
import { RouterOptions } from '@/uni_modules/kux-router/utssdk/interface';
import routes from './router';

export function createApp() {
    const app = createSSRApp(App)
    const router = createRouter({
        routes: routes
    } as RouterOptions);
    // 组合式API建议通过如下方式挂载
    // app.provide('router', router);
    // 选项式API可以通过如下方式挂载
    app.config.globalProperties.router = router;
    return {
        app
    }
}

提示

v1.1.6 版本开始，支持自定义路由映射生成文件，可以自定义生成的文件地址，默认在项目根目录生成 pagesJsonRouter.uts 文件。
v1.1.6 版本开始，支持定义路由管理文件，可以自定义路由管理文件地址，默认在项目根目录生成 router.uts 文件。
可查看 pagesJsonPlugin 说明了解更多关于自定义路由映射生成文件以及自定义路由管理文件的配置。

全局挂载后我们可以通过 this.$router 的形式使用路由实例，并且以 this.$router.currentRoute 的形式访问当前路由：

// Home.uvue
export default {
  onReady() {
      // 打印当前路由信息
      console.log(this.$router.current);
  },
  methods: {
    goToDashboard() {
      if (isAuthenticated) {
        this.$router.push('/dashboard')
      } else {
        this.$router.push('/login')
      }
    },
  },
}

要在 setup 函数中访问路由，请使用 useRouter 或者 useRoute 函数。可以前往组合式 API。

入门 ​

HTML 组件标签 ​

kux-router-link ​

JavaScript API ​

入门

HTML 组件标签

`kux-router-link`

JavaScript API