主题
安装
扫码登录后授权下载
自V3版本开始，我们仅提供收费版本的uni-simple-router。如果你只是想进行简单尝试，可以下载我们的开源版。在Github上可以找到完整的源代码。
如果你已经获得授权并登录了，可以直接点击下方提示栏下载插件包。另外，你还可以在导航头像和名称位置点击，进入个人中心，在那里也可以下载插件包。
如果你还未获得授权，可以参考此处获取授权。
下载完成并解压后，你将会获得如下目录结构：
uni-simple-router ├─ version.json // 详细的版本信息 ├─ appletRouterView.vue // 用于在小程序中使用的 simple-router-view ├─ compiler.d.ts // 编译器 - 适合TS智能提示的.d.ts文件 ├─ compiler.js // 编译器 - 完整插件文件 ├─ compiler.js.LICENSE.txt // 编译器 - 许可证文件 - 【新版可能删除】 ├─ index.d.ts // 运行时 - 适合TS智能提示的.d.ts文件 ├─ index.mjs // 运行时 - 完整的运行时uni-simple-router文件 └ index.mjs.LICENSE.txt // 运行时 - 许可证文件 - 【新版可能删除】版本要求和先决条件
先决条件
第一步将插件包放入工程
在开始之前，请确保您已经阅读 版本要求和先决条件。
如果您是通过脚手架初始化的项目，只需将插件包解压后直接放入src目录下的任意文件夹即可。而如果您是通过HBuilderX编辑器初始化的项目，则直接将插件包放入项目根目录下的任意文件夹中即可。
如果您的项目中没有vite.config.js文件，您需要手动在项目根目录下创建一个，并写入以下默认配置。这样可以确保项目正常工作。
js
// vite.config.js import { defineConfig } from "vite"; import uni from "@dcloudio/vite-plugin-uni"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [uni()], });第二步配置 vite.config.js
在开始之前，请确保您已经按照第一步的配置要求进行了必要的设置。
js
// vite.config.js import { defineConfig } from "vite"; import uni from "@dcloudio/vite-plugin-uni"; import vitePluginUniRouter from './src/uni-simple-router/compiler' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vitePluginUniRouter({ pluginPath: `./uni-simple-router`, }), uni() ], });以上代码是用于将编译器与 vite 进行集成的配置。在代码中，pluginPath 属性用于指定插件包的位置，你可以设置绝对路径或相对路径来指定插件包的位置。
陷阱提示
在配置编译器时，请确保将其放置在 plugins 数组的第一位，以确保它按预期工作。
第三步配置运行时
在开始之前，请确保您已按照第二步的配置要求进行了必要的设置。此外，请停止正在配置的项目的运行，在配置完成后再重新编译。
新建并写入 router.js
js
// router.js import { createRouter, __dynamicImportComponent__ } from '@/uni-simple-router' const router = createRouter({ platform: process.env.VUE_APP_PLATFORM, routes:[{ path:`/`, component:__dynamicImportComponent__(`@/pages/index.vue`,{ pageType:`top` }) }] }) export default router将 router 在 main.js 中导出
js
// main.js import { createSSRApp } from "vue"; import App from "./App.vue"; import router from '@/router' export function createApp() { const app = createSSRApp(App); return { app, router }; }去除 pages.json 中的 pages 及 subpackages 字段
js
// pages.json { "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } }为了减少该栏目的复杂度，我们省略了一些无关紧要的代码，请确保已经按照糟色部分的代码进行了配置。现在你会注意到 pages.json 与传统的 uni-app 项目有所不同，它省略了 pages 和 subpackages 的配置。这得益于 uni-simple-router 编译器，它让你专注于业务逻辑，无需每次都在庞大而臃肿的 pages.json 文件中查找或添加页面。编译器会根据你在路由表中的配置生成真正的页面，允许你在构建时或运行时创建复杂的嵌套页面体系。截至目前安装已经完成，你可以重新编译并查看你的应用。你也可以查下下方最终的项目结构。
陷阱提示
在新版的 uni-app 中，由于官方加入了一个编译前的逻辑判断，要求 pages.json 中至少要有一项 pages 路径配置，否则热编译时会在前端抛出警告。该警告在 h5 上表现比较明显，当出现这个问题警告时，你可以通过刷新浏览器来解除警告。如果你想忽略这个警告，你可以在 pages.json 中随意指定一个页面路径，这个路径可以是你项目中的任何页面地址，该页面配置不会被最终打包，而是仅用于跳过这个警告的作用。
js
// pages.json { "pages": [{ "path": "pages/index/index" }], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } }记住这个不是必须的，只是给出一个忽略警告的方式。
集成后的项目结构
CLI 初始化的项目
js
E:\codeTest\playground ├─.gitignore ├─index.html ├─package.json ├─tsconfig.json ├─vite.config.ts ├─src | ├─App.vue | ├─env.d.ts | ├─main.ts | ├─manifest.json | ├─pages.json | ├─shime-uni.d.ts | ├─uni.scss | ├─uni-simple-router | | ├─appletRouterView.vue | | ├─version.json | | ├─compiler.d.ts | | ├─compiler.js | | ├─compiler.js.LICENSE.txt - 【新版可能删除】 | | ├─index.d.ts | | ├─index.mjs | | └index.mjs.LICENSE.txt - 【新版可能删除】 | ├─static | | └logo.png | ├─router | | └index.ts | ├─pages | | └index.vueIDE 初始化的项目
js
E:\codeTest\playground ├─App.vue ├─index.html ├─main.js ├─manifest.json ├─package-lock.json ├─package.json ├─pages.json ├─uni.promisify.adaptor.js ├─uni.scss ├─vite.config.js ├─uni-simple-router | ├─appletRouterView.vue | ├─version.json | ├─compiler.d.ts | ├─compiler.js | ├─compiler.js.LICENSE.txt - 【新版可能删除】 | ├─index.d.ts | ├─index.mjs | └index.mjs.LICENSE.txt - 【新版可能删除】 ├─static | └logo.png ├─router | └index.js ├─pages | └index.vue