uniapp封装路由管理（兼容Vue2和Vue3）

1：uniapp已经有路由管理了为什么还要二次封装路由？

• 简化配置和调用
• 增强灵活性和可扩展性
• 实现统一的功能和策略
• 提升开发效率和团队协作

2. 增强灵活性和可扩展性

• 灵活配置：二次封装允许开发者根据实际需求灵活配置路由参数，如跳转类型、页面参数等。这种灵活性使得路由管理更加符合项目的具体需求。
• 易于扩展：随着项目的不断发展，可能需要新增或修改路由配置。通过二次封装，可以方便地扩展路由功能，无需对原有代码进行大规模修改。

2. 集中管理，简化配置

• 统一配置：通过封装路由管理，将所有页面路由信息集中在一个地方进行配置和管理。这样不仅使得路由信息一目了然，还方便进行统一修改和维护。
• 简化跳转：开发者只需调用封装好的路由方法，如$openPage，而无需关心底层的路由实现细节，大大简化了页面跳转的代码。

3. 提高代码的可读性和可维护性

• 清晰的代码结构：通过封装，将路由处理逻辑与业务逻辑分离，使得代码结构更加清晰。开发者可以更容易地理解和维护项目的导航流程。
• 易于扩展：当需要新增或修改路由时，只需在配置中进行调整，无需修改业务代码，降低了代码耦合度，提高了可维护性。

4. 增强代码的复用性和灵活性

• 复用性：封装的路由方法可以在项目的不同部分重复使用，无需重复编写相同的跳转逻辑。
• 灵活性：通过配置参数，如跳转类型（navigateTo、switchTab等），可以灵活地实现不同的跳转需求，满足不同场景下的导航要求。

5. 便于实现统一的功能和策略

• 统一处理：在路由封装中，可以方便地实现统一的路由拦截、权限校验等功能，确保所有页面跳转都遵循相同的规则。
• 全局参数传递：通过封装，可以更方便地在页面间传递参数，实现全局状态管理，提升用户体验。

6. 提升开发效率和用户体验

• 开发效率：封装的路由管理减少了重复代码的编写，提高了开发效率。开发者可以更快地实现页面跳转功能，专注于业务逻辑的开发。
• 用户体验：通过统一的路由管理，可以确保页面跳转的一致性和流畅性，提升用户在应用中的导航体验。

统一管理的优势

• 错误检查：在处理路由配置时，添加了错误检查机制，确保每个页面都有必要的属性（如name），从而避免运行时错误。
• 默认值处理：在不需要指定跳转类型时，提供默认的navigateTo，简化了配置。
• 支持SubPackages：通过处理subPackages，支持分包加载，优化了应用的性能和加载时间。

我这里简单做了一下封装有什么问题欢迎留言指正

在项目中创建min.router.config.js文件

/*** min.router.config.js* 使用方法* Vue2* 示例：this.$openPage({name: 'my', query: {id: 123}, type: 'navigateTo'})		传参方式* 示例：this.$openPage('my')    不传参数可以简写* Vue3 setup语法糖* 示例：* import { getCurrentInstance } from 'vue';* const { $openPage } = getCurrentInstance().appContext.config.globalProperties;* $openPage({name: 'my', query: {id: 123}, type: 'navigateTo'})		传参方式* $openPage('my')    不传参数可以简写* Vue2 和 Vue3* 视图中可直接使用 $openPage('my')* @param name			字符串地址名* @param query			传递的参数* @param type			跳转的方式 ['navigateTo', 'switchTab', 'reLaunch', 'redirectTo']  不传默认navigateTo* this.$parseURL()		解析路由参数* 使用方法在接收参数页this.$parseURL(options)*/
// #ifdef VUE3
import { getCurrentInstance } from 'vue';
// #endifconst toString = Object.prototype.toStringfunction isObject(value) {return toString.call(value) === '[object Object]'
}function isString(value) {return toString.call(value) === '[object String]'
}function isDefault(value) {return value === void 0
}function openPage(args) {let name, query = {}, queryStr = null, path, type, isName = false;switch (true) {case isObject(args):({ name, type, query = {} } = args)breakcase isString(args):name = args;breakdefault:throw new Error('参数必须是对象或者字符串')}if (isObject(query)) {queryStr = encodeURIComponent(JSON.stringify(query))} else {throw new Error('query数据必须是Object')}this.$routerConfig.forEach(item => {if (item.name === name) {path = item.path;type = type || (item.type || 'navigateTo');isName = true;}})if (!isName) {throw new Error(`没有${name}页面`)}if (!['navigateTo', 'switchTab', 'reLaunch', 'redirectTo'].includes(type)) {throw new Error(`name:${name}里面的type必须是以下的值['navigateTo', 'switchTab', 'reLaunch', 'redirectTo']`)}return new Promise((resolve, reject) => {uni[type]({url: `/${path}?query=${queryStr}`,success: resolve,fail: reject})})
}function parseURL() {// #ifdef VUE2const query = this.$root.$mp.query.query;// #endif// #ifdef VUE3const query = getCurrentInstance().proxy.$root.$scope.options.query;// #endifif (query) {return JSON.parse(decodeURIComponent(query))} else {return {}}
}function install(Vue, routerConfig) {if (!routerConfig || !Array.isArray(routerConfig.options.routes)) {throw new Error("routerConfig 必须是一个带有 routes 属性的对象");}// Vue 2 和 Vue 3 的兼容混入Vue.mixin({beforeCreate: function() {if (!isDefault(routerConfig)) {Vue._routerConfig = routerConfig;}}})// 定义全局属性const globalProperties =// #ifdef VUE2Vue.prototype// #endif// #ifdef VUE3Vue.config.globalProperties// #endif;Object.defineProperty(globalProperties, '$routerConfig', {get: function() {return Vue._routerConfig._router;}})Object.defineProperty(globalProperties, '$parseURL', {get: function() {return parseURL.bind(this);}})Object.defineProperty(globalProperties, '$openPage', {get: function() {return openPage.bind(this);}})
}function minRouterConfig(options) {if (!(this instanceof minRouterConfig)) {throw Error("minRouterConfig是一个构造函数，应该用`new`关键字调用")}isDefault(options) && (options = {})this.options = options;this._router = options.routes || [];
}minRouterConfig.install = install;
minRouterConfig.prototype.openPage = openPage;
minRouterConfig.prototype.parseURL = parseURL;
export default minRouterConfig;

创建router.config.js文件

/** 使用方法* Vue2* 示例：this.$openPage({name: 'my', query: {id: 123}, type: 'navigateTo'})		传参方式* 示例：this.$openPage('my')    不传参数可以简写 * 示例：<view @click="$openPage('ceshi')"></view>  奈何小程序不支持这样跳转* Vue3 setup语法糖* 示例：* import { getCurrentInstance } from 'vue';* const { $openPage } = getCurrentInstance().appContext.config.globalProperties;* $openPage({name: 'my', query: {id: 123}, type: 'navigateTo'})		传参方式* $openPage('my')    不传参数可以简写* Vue2 和 Vue3* 视图中可直接使用 $openPage('my')* 配置参数项说明：* name:可选配置 （路由名称）* path:必填配置 （路由地址）* type 跳转的方式 ['navigateTo', 'switchTab', 'reLaunch', 'redirectTo']  不传默认navigateTo*/
import pagesJson from '@/pages.json'
import minRouterConfig from './min.router.config.js'// 处理 pages 数组
function processPages(pages) {return pages.map(page => {if (!page.name) {throw Error(`Page is missing the 'name' property: ${JSON.stringify(page)}`);}const processedPage = {name: page.name,path: page.path}// 仅在 type 不存在时不添加默认值if(page.type) {processedPage.type = page.type;}return processedPage});
}// 处理 subPackages 数组
function processSubPackages(subPackages) {if(!subPackages) return []let routes = [];subPackages.forEach(subPackage => {routes = routes.concat(processPages(subPackage.pages).map(page => {return {...page,path: subPackage.root + '/' + page.path};}));});return routes;
}const router = new minRouterConfig({routes: [ // 权限路由 在main.js可实现路由拦截 所以路由都需要注册...processPages(pagesJson.pages),...processSubPackages(pagesJson.subPackages)]
})export default router

router.config.js文件无需配置任何路径，均在pages.json中配置即可

最后在main.js中我们全局挂载一下

import App from './App'// 引入全局方法
import minRouterConfig from '@/config/min.router.config.js'
import routerConfig from '@/config/router.config.js'// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)app.use(minRouterConfig, routerConfig)return {app}
}
// #endif

我这里是在项目根目录创建了一个config文件夹，两个文件都在config文件夹中

以上配置在uniapp框架下不管是Vue2或者是Vue3都通用

不管是Vue2的组合式API下还是Vue3的setup语法糖下都可以正常使用

在页面中使用

Vue3中 setup语法糖

<template><button @click="onClick">跳转我的</button>
</template><script setup>import { getCurrentInstance } from 'vue';// data数据const { $openPage } = getCurrentInstance().appContext.config.globalProperties;// methods方法const onClick = () => {$openPage('user')}
</script><style></style>

Vue2 组合式API

<template><button @click="onClick">跳转我的</button>
</template><script>export default {methods: {onClick() {this.$openPage('user')}}}
</script><style></style>

通用

<template><button @click="$openPage('user')">跳转我的</button>
</template><script></script><style></style>

以上有什么问题可以下面留言一起学习