更新记录

1.1.1（2024-07-27）

• 新增logo

1.1.0（2024-07-27）

• 更新结构，统一版本，单独创建了一个库

1.0.8（2024-07-25）

• 修复：后置守卫不触发的问题

平台兼容性

hi-router

介绍

• 一个简单的路由跳转、路由拦截、路由守卫工具
• 此工具用 onShow() 来简单实现每次进入页面都能触发后置路由拦截器函数

开始

• 在 App.vue 中引入并配置

<!-- App.vue -->
<script setup>
    // 引入 HiRouter
    import { useHiRouter } from "@/uni_modules/hi-router";

    // 当 uni-app 初始化完成时触发
    onLaunch((opts) => {
        // 当 uni-app 初始化完成后再配置 HiRouter，如果放在上方（外部）的话，获取到的第一次路由数据会是 undefined
        const hiRouter = useHiRouter({
            /**
             * 前置路由拦截器函数
             * @param {Object} targetPage 目标页面数据
             * @param {Object} currentPage 当前页面数据
             * @returns {Boolean} true: 继续执行跳转，false: 终止跳转
             */
            before: function(target, current) {
                // 目标页面需要登录才能进入，并且当前用户未登录
                if (target?.needLogin && !useUserStore().isLoggedIn) {
                    // 跳转到登录页面
                    uni.$hi.router.to("/subPackages/auth/login");

                    // 并终止跳转到目标页面
                    return false;
                }

                // 目标页面不需要登录就能进入，或者当前用户已登录
                return true;
            },

            /**
             * 后置路由拦截器函数
             * @param {Object} currentPage 当前页面数据
             * @returns
             */
            after: function(current) {
                console.log("hiRouter 后置路由拦截器函数 ->", current)
                // ... 跳转后的逻辑
            }
        });

        // 可以将 HiRouter 函数挂载到全局方便使用
        uni.$hi.router = hiRouter;
    });
<script>

// main.js
// 引入 hiRouter 的 mixin 配置
import hiRouterMixin from "@/uni_modules/hi-router/mixin";

export function createApp() {
    // ...

    // 在此处混入 hiRouter 的 mixin 配置
    app.mixin(hiRouterMixin)

    // ...
}

配置

const config = {
    /**
     * 前置路由拦截器函数
     * @param {Object} targetPage 目标页面数据
     * @param {Object} currentPage 当前页面数据
     * @returns {Boolean} true: 继续执行跳转，false: 终止跳转
     */
    before: null,

    /**
     * 后置路由拦截器函数
     * @param {Object} currentPage 当前页面数据
     * @returns
     */
    after: null
};

方法

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

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

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

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

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

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

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