网络推广网站公司,wordpress网站弹窗插件,做电脑回收什么网站好,设计事务所1#xff1a;uniapp已经有路由管理了为什么还要二次封装路由#xff1f;
简化配置和调用增强灵活性和可扩展性实现统一的功能和策略提升开发效率和团队协作
2. 增强灵活性和可扩展性
灵活配置#xff1a;二次封装允许开发者根据实际需求灵活配置路由参数#xff0c;如跳…1uniapp已经有路由管理了为什么还要二次封装路由
简化配置和调用增强灵活性和可扩展性实现统一的功能和策略提升开发效率和团队协作
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语法糖
templatebutton clickonClick跳转我的/button
/templatescript setupimport { getCurrentInstance } from vue;// data数据const { $openPage } getCurrentInstance().appContext.config.globalProperties;// methods方法const onClick () {$openPage(user)}
/scriptstyle/styleVue2 组合式API
templatebutton clickonClick跳转我的/button
/templatescriptexport default {methods: {onClick() {this.$openPage(user)}}}
/scriptstyle/style通用
templatebutton click$openPage(user)跳转我的/button
/templatescript/scriptstyle/style以上有什么问题可以下面留言一起学习
