uni-crazy-router 开源项目最佳实践教程

最新推荐文章于 2025-05-22 09:00:39 发布

薛珑佳

最新推荐文章于 2025-05-22 09:00:39 发布

阅读量304

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00632/article/details/148129619

uni-crazy-router 开源项目最佳实践教程

uni-crazy-router 一个更贴合uni-app的router插件，一切都使用uni-app原生钩子实现和方法实现，抛弃了vue-router的影子项目地址: https://gitcode.com/gh_mirrors/un/uni-crazy-router

1、项目介绍

uni-crazy-router 是一个专为 uni-app 开发者设计的路由插件。它基于 uni-app 的原生跳转方法，提供了一种更加贴合 uni-app 开发模式的路由解决方案。该插件不需要配置路由表，完全使用 uni-app 自身的钩子和属性实现，不耦合于 Vue 的组件，更不依赖 Vue-router。它支持 uni-app Vue3 版本，并且提供了防抖防刷新的处理，避免了小程序可以连续疯狂点击触发窗口的问题。

2、项目快速启动

步骤 1：安装插件

在项目目录下执行以下命令安装 uni-crazy-router：

npm i uni-crazy-router -S

步骤 2：引入插件

根据你的 Vue 版本，引入 uni-crazy-router 并进行配置。

Vue3 版本

在 src/main.js 文件中：

import { createSSRApp } from "vue";
import App from "./App.vue";
import { setupRouter } from "./router";

export function createApp() {
  const app = createSSRApp(App);
  // 注册路由
  setupRouter(app);
  return { app };
}

在 src/router/index.js 文件中：

import uniCrazyRouter from "uni-crazy-router";

export function setupRouter(app) {
  // 接收 vue3 的实例，并注册 uni-crazy-router
  app.use(uniCrazyRouter);
  // 配置路由拦截器
  uniCrazyRouter.beforeEach((to, from, next) => {
    // 逻辑代码
    next();
  });
  uniCrazyRouter.afterEach((to, from) => {
    // 逻辑代码
  });
  uniCrazyRouter.onError((to, from) => {
    // 逻辑代码
  });
}

Vue2 版本

在 src/main.js 文件中：

import Vue from 'vue';
import App from './App';
import './router';

Vue.config.productionTip = false;
App.mpType = 'app';

const app = new Vue({
  ...App
});
app.$mount();

在 src/router/index.js 文件中：

import Vue from 'vue';
import uniCrazyRouter from "uni-crazy-router";

Vue.use(uniCrazyRouter);

uniCrazyRouter.beforeEach((to, from, next) => {
  // 逻辑代码
  next();
});
uniCrazyRouter.afterEach((to, from) => {
  // 逻辑代码
});
uniCrazyRouter.onError((to, from) => {
  // 逻辑代码
});

步骤 3：使用插件

在页面中，你可以通过 uni.navigateTo 等原生方法触发跳转，并传递额外的页面参数：

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

在目标页面中，你可以通过 this.$routeParams 和 this.$passedParams 获取传递的参数：

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