mpvue中路由管理之mpvue-entry-白红宇的个人博客

mpvue中路由管理之mpvue-entry

发布日期：2022-02-17 07:12:02 浏览次数：1 分类：技术文章

本文共 627 字，大约阅读时间需要 2 分钟。

继上一篇文章，介绍一下mpvue中使用mpvue-entry管理路由跳转，网上资料不是很多

mpvue-entry是集中式页面配置，自动生成各页面的入口文件，优化目录结构，支持新增页面热更新*

1.废话不多说，要使用mpvue-entry管理首先需要在package.json中引入依赖后，运行npm install加载依赖

在这里插入图片描述

2.引入成功

在这里插入图片描述

2.需要在webpack.base.conf.js文件中配置

在这里插入图片描述

上面注释的是原本的路由跳转配置，因使用了mpvue-entry后不需要，故可注释或删除

在这里插入图片描述

继续

在这里插入图片描述

3.新建pages.js文件加载模块

在这里插入图片描述

4.删除页面原本的路由配置文件

在这里插入图片描述

在这里插入图片描述

5.新建routers目录用于存放页面路由配置文件

在这里插入图片描述

js文件中的详细配置，path为页面路径，navigationBarTitleText为页面标题，enablePullDownRefresh是否开启下拉刷新，可以看到module.exports指向的是一个数组，也就是在其中我们可以增加多个页面配置对象，可以自行尝试

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

main.js与以上页面配置文件不同，用来加载页面配置文件

在这里插入图片描述

删除原本路由对配置文件的引用

在这里插入图片描述

修改原本的tabBar配置为当前配置的路径

在这里插入图片描述

如果想要跳转到counter.vue页面，使用下面的跳转路径规则

在这里插入图片描述

因为改变比较多，又新加了文件，所以 npm run build 一下，现在就使用微信开发者工具打开我们的

在这里插入图片描述

mpvue-entry就已经配置好了

在这里插入图片描述

页面跳转也是没有任何问题

在这里插入图片描述

转载地址：https://blog.csdn.net/qq_42559485/article/details/100066365 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：SpringIOC源码总结

下一篇：mpvue项目搭建&目录文件讲解

发表评论

最新留言

初次前来，多多关照！

[***.217.46.12]2024年05月01日 06时54分08秒

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

推荐文章

局部敏感哈希Locality Sensitive Hashing归总 2019-04-30

图像检索中为什么仍用BOW和LSH 2019-04-30

图˙谱˙马尔可夫过程˙聚类结构----by林达华 2019-04-30

深度学习读书笔记之AE（自动编码AutoEncoder） 2019-04-30

深度学习读书笔记之RBM 2019-04-30

深度学习word2vec笔记之基础篇 2019-04-30

微信小程序canvas绘制圆角矩形 2019-04-30

微信小程序canvas裁剪图片中间部分 2019-04-30

my docker tutorial 2019-04-30

gdb debug summary 2019-04-30

python learning 2019-04-30

collections 2019-04-30

leetcode 122. Best Time to Buy and Sell Stock II 2019-04-30

第二个MacBook，继续加油！ 2019-04-30

unittest source code learning 2019-04-30

故障处理_vxwork 大端序和变量指针 2019-04-30

写在前面的话 2019-04-30

数据结构学习_树（1） 2019-04-30

数据结构学习_树（2） 2019-04-30

数据结构学习_树（3） 2019-04-30

白红宇的个人博客 - 记录点点滴滴的事 - 您是第 310386981 位访客

访问时间: 2024-05-03 18:39:44 访问IP: 3.144.116.159 Copyright © 2020 - 2023 blog.css8.cn 京ICP备2021015314号-1 手机版