uni-simple-router

最新推荐文章于 2024-08-12 16:30:34 发布

虚幻私塾

最新推荐文章于 2024-08-12 16:30:34 发布

阅读量1k

点赞数 1

分类专栏： python 文章标签： flask python 后端计算机

本文链接：https://blog.csdn.net/u013190417/article/details/125057190

版权

uni-simple-router是一款专为uniapp设计的路由器，与uniapp深度集成，支持小程序、App和H5端。它允许使用vue-router进行H5端的完全开发，包含路由配置、导航守卫、路由懒加载等功能。通过DefinePlugin进行编译时配置全局变量，利用uni-read-pages获取pages.json中的路由信息。

摘要由CSDN通过智能技术生成

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

目录* + uni-simple-router

uni-simple-router

专为uniapp打造的路由器，和uniapp深度集成
通配小程序、App和H5端
H5能完全使用vue-router开发
模块化、查询、通配符、路由参数
使 uni-app实现嵌套路由（仅H5端完全使用vue-router）
uniapp用到了很多vue的api，但在路由管理的功能相对于vue-router还是比较欠缺的，比如全局导航守卫

官方文档：https://hhyang.cn/v2/start/quickstart.html

一、快速上手

// 针对uniapp HBuilder创建的项目，非cli构建
// 1⃣ NPM 安装
npm install uni-simple-router

// 2⃣ 初始化
npm install uni-read-pages // 配合vue.config.js自动读取pages.json作为路由表的方式，源码例如下：扩二

// 配置vue.config.js
const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages()
module.exports = {
	configureWebpack: {
		plugins: [
		      new tfPages.webpack.DefinePlugin({
                      // 1⃣ 配置全局变量
                      // ROUTES: JSON.stringify(tfPages.routes) 
                      // 2⃣ includes 可自定义，解析pages.json路由配字段的配置， 默认 ['path', 'name', 'aliasPath']
                        ROUTES: tfPages.webpack.DefinePlugin.runtimeValue(()=>{
                          const tf = new TransformPages({
                            includes:  ['path', 'name', 'aliasPath']
                          })
                          return JSON.stringify(tfPages.routes)