更新记录

3.0.7（2024-09-15） 下载此版本

• 简化跳转逻辑

3.0.6（2024-08-26） 下载此版本

• 更新示例工程

3.0.5（2024-08-26） 下载此版本

• 较大的改动，但是不影响之前的使用方式，主要是将其封装成了一个vue3组件，并且使用配置也更加简单了

平台兼容性

hi-router

介绍

• 一个路由跳转、路由拦截、路由守卫工具
• 可以对 uni-app 原生的路由跳转方法进行拦截，实现路由跳转、路由拦截、路由守卫等功能
• 注意：小程序通过点击原生的 TabBar 进行切换不会触发前置拦截函数，正在思考有什么解决方案，头疼的小程序~~~。

仓库

Gitee：https://gitee.com/chenshuang-jinli/hi-uniapp-router

开始

• 在 main.js 中引入并设置

<script setup>
    // 引入 HiRouter
    import hiRouter from "@/uni_modules/hi-router";

    // 使用 HiRouter
    app.use(hiRouter, {
        // 配置，参考下方的配置说明
    });
</script>

配置

const config = {
    /**
     * 前置路由拦截器函数
     * @param {Object} targetPageData 目标页面数据（该数据为页面在 pages.json 中配置的数据）
     * @param {Object} params 调用路由跳转方法时传递的参数对象，如果使用 hiRouter 的跳转方法，并且传递的是字符串或数字时，会自动将参数转换成 uni 原生跳转方法的参数对象中的对应属性的值，该对象中还增加了个 method 字段，表示跳转方式
     * @param {Object} currentPageData 当前页面数据（该数据为页面在 pages.json 中配置的数据）
     * @returns {Boolean} true: 继续执行跳转，false: 终止跳转
     */
    before: null,

    /**
     * 后置路由钩子函数
     * @param {Object} currentPage 当前页面数据（该数据为页面在 pages.json 中配置的数据）
     */
    after: null
};

提示：

上面的配置可以在初始化的时候进行设置，对全局所有跳转生效。
也可以在跳转方法中设置配置，对本次跳转单独生效，但是不影响全局配置的执行。
例如：

uni.navigateTo({
    url: "/subPackages/auth/pages/login",
    before: () => {
        console.log("只对本次跳转单独生效 前置拦截函数");
        return true;
    },
    after: () => {
        console.log("只对本次跳转单独生效 后置钩子函数");
    },
    success: () => {
        console.log("sucess 函数本身就是一个后置钩子函数，但是没有参数");
    }
});

// 或

uni.$hiRouter.go({
    url: "/subPackages/auth/pages/login",
    before: () => {
        console.log("只对本次跳转单独生效 前置拦截函数");
        return true;
    },
    after: () => {
        console.log("只对本次跳转单独生效 后置钩子函数");
    },
    success: () => {
        console.log("sucess 函数本身就是一个后置钩子函数，但是没有参数");
    }
});

方法

/**
 * 设置配置
 * @param {Object} config 配置数据
 */
function setConfig(config = {}) {}

/**
 * 保留当前页面，跳转到应用内的某个页面
 * @param {Object|String} params 当是字符串时表示目标页面路径，当是对象时参数对象（通常和 uni-app 对应的路由方法的参数一致）
 * @alias to 该方法的别名
 */
function navigateTo(params = {}) {}

/**
 * 关闭当前页面，跳转到应用内的某个页面
 * @param {Object|String} params 当是字符串时表示目标页面路径，当是对象时参数对象（通常和 uni-app 对应的路由方法的参数一致）
 * @alias redirect 该方法的别名
 */
function redirectTo(params = {}) {}

/**
 * 关闭所有页面，打开到应用内的某个页面
 * @param {Object|String} {Object|String} params 当是字符串时表示目标页面路径，当是对象时参数对象（通常和 uni-app 对应的路由方法的参数一致）
 * @alias launch 该方法的别名
 */
function reLaunch(params = {}) {}

/**
 * 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
 * @param {Object|String} {Object|String} params 当是字符串时表示目标页面路径，当是对象时参数对象（通常和 uni-app 对应的路由方法的参数一致）
 * @alias tab 该方法的别名
 */
function switchTab(params = {}) {}

/**
 * 关闭当前页面，返回上一页面或多级页面
 * @param {Object|String} {Object|String} params 当是字符串时表示目标页面路径，当是对象时参数对象（通常和 uni-app 对应的路由方法的参数一致）
 * @param {Number} delta 返回的页面数
 * @alias back 该方法的别名
 */
function navigateBack(params = {}, delta = 1) {}

/**
 * 刷新当前页面
 */
function refresh() {}

/**
 * 默认跳转到目标页
 * 1. 如果目标页面是一个绝对 URL
 *   - 如果是在 H5 环境中：直接用 window.open() 打开页面
 *   - 如果是在小程序环境中：直接返回
 *   - 如果是在 APP 环境中：跳转到外部浏览器打开页面
 * 2. 如果未指定 type 或 object.method 跳转方式，则按下面的规则进行跳转：
 *   - tabBar 页面则使用 switchTab 方式跳转
 *   - 非 tabBar 页面默认使用 navigateTo 方式跳转
 *   - 如果第一个参数是数字则使用 navigateBack 方式返回指定页数
 * @param {String} params string 类型时: 表示目标路径; number 类型时：表示返回的页面数; object 类型时: 表示跳转方法参数对象，object.method 可以指定跳转方式; number: 默认为返回的页面数
 * @param {String} type 跳转类型。
 */
function route(params, type, webviewPagePath) {}