uni-crazy-router 的安装和配置教程

项目基础介绍和主要编程语言

uni-crazy-router 是一个为 uni-app 项目设计的轻量级路由插件，它完全使用 uni-app 原生 API 和钩子实现，无需依赖于 vue-router。该项目的主要编程语言是 JavaScript，并且支持 uni-app 的 Vue 3 版本（version >= 1.0.0）。

项目使用的关键技术和框架

uni-crazy-router 使用了 uni-app 的原生跳转方法，如 uni.navigateTo 等，以确保与 uni-app 的完美集成。它通过观察者模式和异步函数实现了路由拦截和钩子函数的功能，允许开发者对路由跳转进行灵活的控制和自定义。

安装和配置准备工作

在开始安装 uni-crazy-router 之前，请确保你的开发环境已经安装了 Node.js 和 npm 或 yarn，并且已经创建了一个 uni-app 项目。

安装步骤

1. 安装 uni-crazy-router 插件

   在你的 uni-app 项目根目录下，打开终端并执行以下命令来安装 uni-crazy-router：

   npm i uni-crazy-router -S
   

   或者使用 yarn：

   yarn add uni-crazy-router
   

2. 配置 vite.config.js（仅限 H5 生产环境）

   如果你使用的是 Vue 3 版本的 uni-app 并且是在 H5 生产环境下开发，需要在 vite.config.js 文件中添加一个插件来恢复 uni 的全局跳转方法名。这是因为 uni-app 在 H5 生产环境打包时可能会替换这些方法名，导致 uni-crazy-router 失效。

   在 vite.config.js 文件中添加以下配置：

   import { defineConfig } from 'vite'
   import uni from '@dcloudio/vite-plugin-uni'
   import h5ProdEffectPlugin from 'uni-vite-plugin-h5-prod-effect'
   
   export default defineConfig({
     plugins: [
       uni(),
       h5ProdEffectPlugin() // 恢复 H5 生产环境下的全局跳转方法名
     ]
   })
   

3. 在 main.js 中引入并配置路由

   根据你的 Vue 版本（2 或 3），在 src/main.js 文件中引入并配置 uni-crazy-router。

   • Vue 3 版本

     import { createSSRApp } from "vue"
     import App from "./App.vue"
     import { setupRouter } from './router'
     import uniCrazyRouter from "uni-crazy-router"
     
     export function createApp() {
       const app = createSSRApp(App)
       setupRouter(app)
       app.use(uniCrazyRouter)
       return { app }
     }
     

   • Vue 2 版本

     import Vue from 'vue'
     import App from './App'
     import uniCrazyRouter from "uni-crazy-router"
     
     Vue.config.productionTip = false
     App.mpType = 'app'
     
     const app = new Vue({
       ...App
     })
     app.$mount()
     

4. 创建和配置路由文件

   在 src/router/index.js 文件中配置路由。

   • Vue 3 版本

     import uniCrazyRouter from "uni-crazy-router"
     
     export function setupRouter(app) {
       app.use(uniCrazyRouter)
     
       uniCrazyRouter.beforeEach(async (to, from, next) => {
         // 在这里添加路由拦截逻辑
         next()
       })
     
       uniCrazyRouter.afterEach((to, from) => {
         // 在这里添加路由跳转后的逻辑
       })
     
       uniCrazyRouter.onError((to, from) => {
         // 在这里添加路由错误处理逻辑
       })
     }
     

   • Vue 2 版本

     import Vue from 'vue'
     import uniCrazyRouter from "uni-crazy-router"
     
     Vue.use(uniCrazyRouter)
     
     uniCrazyRouter.beforeEach(async (to, from, next) => {
       // 在这里添加路由拦截逻辑
       next()
     })
     
     uniCrazyRouter.afterEach((to, from) => {
       // 在这里添加路由跳转后的逻辑
     })
     
     uniCrazyRouter.onError((to, from) => {
       // 在这里添加路由错误处理逻辑
     })
     

5. 使用原生方法触发路由跳转

   在你的页面或组件中，使用 uni-app 的原生方法触发路由跳转，并传递额外的路由参数和过程参数。

   uni.navigateTo({
     url: '/pages/test/test?a=1&b=1',
     routeParams: {
       c: 1,
       d: 1
     },
     passedParams: {
       e: 1,
       f: 1
     }
   })
   

6. 在页面中获取路由参数

   在你的页面组件中，通过 this.$routeParams 和 this.$passedParams 获取路由参数和过程参数。

   export default {
     data() {
       return {
         title: 'Hello'
       }
     },
     onLoad() {
       console.log(this.$routeParams)
       console.log(this.$passedParams)
     }
   }
   

完成以上步骤后，uni-crazy-router 就已经成功集成到你的 uni-app 项目中了。你可以根据自己的需求调整路由拦截逻辑和钩子函数，以实现更复杂的路由控制功能。