安装 ​

本节介绍如何在uni-app项目中安装Uni Mini Router和生成路由表的插件uni-read-pages-vite或uni-read-pages。

npm i uni-mini-router --save

yarn add uni-mini-router -D

pnpm add uni-mini-router -D

路由表插件安装 ​

我们提供了两种方式来生成路由表：uni-parse-pages和uni-read-pages-vite，这两种方式都可以实现将pages.json中的路由信息转化为uni-mini-router需要的路由表信息，其中uni-read-pages-vite依赖vite，在编译时将读取pages.json生成的路由表注入全局变量，而uni-parse-pages不依赖vite，在应用每次热重载时都会从pages.json中读取信息生成路由表。

由于uni-app在编译到小程序端时无法触发vite的热更新，所以目前只有使用uni-parse-pages生成路由表才可以实现路由信息热更新的功能。

注意！！！uni-parse-pages在uni-mini-router@0.1.0版本起获得支持，在之前的版本使用会有问题。

以下两种方式二选一： ​

使用uni-parse-pages生成路由表（0.1.0起支持） ​

npm i add uni-parse-pages --save

yarn add add uni-parse-pages -D

pnpm add add uni-parse-pages -D

使用uni-read-pages-vite生成路由表 ​

npm i add uni-read-pages-vite --save

yarn add add uni-read-pages-vite -D

pnpm add add uni-read-pages-vite -D

配置路由表 ​

配置 vite.config.ts 通过 define 注入全局变量 查看文档

注意：在 Vite 中使用 define 注入的全局变量并不是热更新的，因为这些变量是在构建时被注入到代码中的，而不是在运行时动态生成的。这意味着如果您更新了page.json，则需要重新构建应用程序才能使更改生效。

CLI创建的项目配置 ​

//vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import TransformPages from 'uni-read-pages-vite'

export default defineConfig({
  plugins: [uni()],
  define: {
    ROUTES: new TransformPages().routes, // 注入路由表
  }
});

HbuilderX创建的项目配置 ​

//vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import TransformPages from 'uni-read-pages-vite'

export default defineConfig({
  plugins: [uni()],
  define: {
    ROUTES: new TransformPages(__dirname).routes, // 注入路由表
  }
});

声明文件type.d.ts ​

.d.ts文件的作用是描述JavaScript库、模块或其他代码的类型声明和元数据，以便编辑器和开发者能够更好地理解和使用该代码。在编译时，TypeScript编译器会使用.d.ts文件来验证代码正确性，并帮助开发者在开发过程中提供更好的代码提示和自动补全功能。

在项目src目录下（HbuilderX创建的项目可以在根目录下）创建type.d.ts文件。

//type.d.ts
declare const ROUTES: []