Uniapp-routerx

1. 安装

// 使用pnpm安装
pnpm add uniapp-routerx

2. 在vite中使用

import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
// 1. 引入模块
import { UniAppRouter, uniappRouterxAutoImport } from 'uniapp-routerx/vite';

export default defineConfig(async () => {
  return {
    plugins:[
      // 2. 在uni之前使用，并配置ts类型文件地址
      UniAppRouter({
        dts: 'src/types/route.d.ts'
      }),
      AutoImport({
        // 3. 配置自动导入（可选）
        imports:['vue', 'pinia', uniappRouterxAutoImport]
      }),
      uni()
    ]
  };
});

3. 创建路由配置

在项目根目录创建 route.config.ts，并返回 route 和 tabbarRoute

route.config.ts配置案例

path 路径中，开头的 斜杠 可加可不加，在内部会进行统一处理

import { IRoute } from 'uniapp-routerx';

/**
 * 路由配置
 */
const route: IRoute[] = [
  {
    path: '/src/pages/config/index',
    name: 'config',
    meta: {
      des: '配置页面，加载小程序内需要用的配置信息，全部加载完毕后，才可进入主页'
    }
  }
];

/**
 * tabbar 路由配置
 */
const tabbarRoute = [
  {
    path: 'src/pages/index/index',
    name: 'index',
    meta: {
      title: '主页'
    }
  },
  {
    path: 'src/pages/mine/index',
    name: 'mine',
    meta: {
      title: '我的页面'
    }
  }
];

export default {
  route,
  tabbarRoute
};

IRoute类型说明

/**
 * UniApp 路由接口定义
 * 用于规范路由对象的结构
 */
interface IRoute {
    /** 页面路径 */
    path: string;
    /** 路由名称 */
    name: string;
    /** 是否为 tabbar 路由 */
    isTabbar?: boolean;
    /** 路由元信息 */
    meta?: {
        /** 页面标题 */
        title?: string;
        /** 描述 */
        des?: string;
    };
}

4. 在 main.js 中初始化

// 1. 引入路由配置
import routerConfig from './route.config.ts';
// 2. 引入宏函数
import { defineRouter } from 'uniapp-routerx';
// 3. 初始化路由配置
defineRouter(routerConfig);

5. 在页面中使用

UniRouter.navigateTo(UniPages.index);

API

UniRouter

| 函数名称 | 参数 | 描述 | | ---------- | ------------------ | :----------------------------- | | navigateTo | route，类型 IRoute | 跳转至任意页面，包括tabbar页面 | | | | | | | | |

UniPages

在模块内部，会把普通页面和tabbar页面的路由合并，组装到该对象内，键为路由的name，值为路由对象

案例

// 原始路由
const route: IRoute[] = [
  {
    path: '/src/pages/config/index',
    name: 'config',
    meta: {
      des: '配置页面，加载小程序内需要用的配置信息，全部加载完毕后，才可进入主页'
    }
  }
];
const tabbarRoute = [
  {
    path: 'src/pages/index/index',
    name: 'index',
    meta: {
      title: '主页'
    }
  },
  {
    path: 'src/pages/mine/index',
    name: 'mine',
    meta: {
      title: '我的页面'
    }
  }
];

// 聚合后的UniPages对象内容
const UniPages = {
 config:{
    path: '/src/pages/config/index',
    name: 'config',
    meta: {
      des: '配置页面，加载小程序内需要用的配置信息，全部加载完毕后，才可进入主页'
    }
  },
  index: {
    path: 'src/pages/index/index',
    name: 'index',
    meta: {
      title: '主页'
    }
  },
  mine: {
    path: 'src/pages/mine/index',
    name: 'mine',
    meta: {
      title: '我的页面'
    }
  }
}