位置: IT常识 - 正文

uni-simple-router(uni-simple-router 跳转无效)

编辑:rootadmin
uni-simple-router 专为uniapp打造的路由器,和uniapp深度集成 通配小程序、App和H5端 H5能完全使用vue-router开发 模块化、查询、通配符、路由参数 使 uni-app实现嵌套路由(仅H5端完全使用vue-router) uniapp用到了很多vue的api, ... 目录uni-simple-router一、快速上手

扩一:webpack插件之DefinePlugin扩二:uni-read-pages 如何获取pages.json中的路由二、H5模式

2.1 路由配置2.2 完全使用vue-router开发 (H5端)2.3 H5 路由传参2.4 H5端路由捕获所有路由或404路由2.5 路由懒加载三、小程序模式四、路由跳转

4.1 组件跳转4.2 编程式导航五、跨平台模式

5.1 提前享用生命周期5.2 导航守卫六、路由守卫-模块化

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

推荐整理分享uni-simple-router(uni-simple-router 跳转无效),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uni-simple-router 小程序,uni-simple-router vue3,uni-simple-router vue3,uni-simple-router 不支持vue3,uni-simple-router 不支持vue3,uni-simple-router 小程序,uni-simple-router 回参,uni-simple-router vue3,内容如对您有帮助,希望把文章链接给更多的朋友!

uni-simple-router(uni-simple-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.jsconst 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) },true) })]}}// /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpack 我的webpack包路径,在软件contents包文件里软件自带的webpack扩一:webpack插件之DefinePlugin允许创建一个 在编译时可以配置的全局变量场景:区分不同开发模式处理// 1⃣ 用法:每个传进DefinePlugin的键值都是一个标志或者多个用.连接起来的标识符new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), BROWSER_SUPPRTS_HTML5: true, VERSION: JSON.stringify('abcde'), TWO: '1+1', 'typeof window': JSON.stringify('object')})// 使用方式console.log('Running App version', VERSION)if(!BROWSER_SUPPRTS_HTML5) require("html5shiv")// 2⃣ 功能标记 来作为一个flag标识启用和禁用构建中的功能new webpack.DefinePlugin({ 'SHOW_PRESSION': JOSN.string(true)})// 3⃣ 服务:可以配置不同环境下的urlnew webpack.DefinePlugin({ 'DEV_URL': JSON.stringify(url_dev), 'PRO_URL': JSON.stringify(url_pro)})扩二:uni-read-pages 如何获取pages.json中的路由// 依赖的源码 - 通过node的path模块获取pages.json文件中的任何信息 (部分是个人注释)const path = require('path')const CONFIG = { includes: ['path', 'aliasPath', 'name'] } // 默认获取路由参数属性// process.cwd() 返回Node.js进程的当前工作目录// path.resolve(url1, 'abc') => url1/abcconst rootPath = path.resolve(process.cwd(), 'node_modules'); // 获取根路径/** 解析绝对路径 * @param {Object} dir */function resolvePath(dir) {return path.resolve(rootPath, dir);}// 类class TransformPages {constructor(config) { // 组合 自定义获取配置属性config = { ...CONFIG, ...config }; this.CONFIG = config; // ↓本机文件路径(HBuilderX包文件里自带的webpack模块路径) /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/webpackthis.webpack = require(resolvePath('webpack'));this.uniPagesJSON = require(resolvePath('@dcloudio/uni-cli-shared/lib/pages.js')); // TODO: 根据CONFIG解析pages.json中的路由信息 和 小程序 分包下的路由this.routes = this.getPagesRoutes().concat(this.getNotMpRoutes());} // 获取所有pages.json下的内容 返回jsonget pagesJson() {return this.uniPagesJSON.getPagesJson();} // 通过读取pages.json文件 生成直接可用的routesgetPagesRoutes(pages = this.pagesJson.pages, rootPath = null) {const routes = [];for (let i = 0; i < pages.length; i++) {const item = pages[i];const route = {};for (let j = 0; j < this.CONFIG.includes.length; j++) {const key = this.CONFIG.includes[j];let value = item[key];if (key === 'path') {value = rootPath ? `/${rootPath}/${value}` : `/${value}`}if (key === 'aliasPath' && i == 0 && rootPath == null) {route[key] = route[key] || '/'} else if (value !== undefined) {route[key] = value;}}routes.push(route);}return routes;}// 解析小程序分包路径getNotMpRoutes() {const { subPackages } = this.pagesJson;let routes = [];if (subPackages == null || subPackages.length == 0) {return [];}for (let i = 0; i < subPackages.length; i++) {const subPages = subPackages[i].pages;const root = subPackages[i].root;const subRoutes = this.getPagesRoutes(subPages, root);routes = routes.concat(subRoutes)}return routes}/** * 单条page对象解析 * @param {Object} pageCallback * @param {Object} subPageCallback */parsePages(pageCallback, subPageCallback) {this.uniPagesJSON.parsePages(this.pagesJson, pageCallback, subPageCallback)}}module.exports = TransformPages二、H5模式2.1 路由配置import {RouterMount,createRouter} from 'uni-simple-router';const router = createRouter({ // 路由配置 routes: [ { path: '/pages/index/index', // 必须和pages.json中相同 extra: { pageStyle: { color: '#f00' }// 及其它自定义参数 } } ]})// 组件中可以通过 this.$Route 查看路由元信息2.2 完全使用vue-router开发 (H5端)嵌套路由时,若使用name方式跳转,仅支持 this.$router.push({ name: children1 })// 使用 vue-router开发将会失去uniapp的生命周期const router = createRouter({ h5: { vueRouterDev: true, // 完全使用vue-router开发 默认是false }, // 路由配置 routes: [ { path: '/', name: 'home', component: () => import('@/common/router/home.vue'), // 嵌套路由(仅H5端),小程序端会重新页面打开 children: [ { path: 'home/children1', name: 'children1', component: () => import('@/common/router/children1.vue') }, { path: 'home/children2', name: 'children2', component: () => import('@/common/router/children2.vue') } ] } ]})2.3 H5 路由传参// 除vue-router外,美化url可以在基础配置时,定义aliasPath变量,设置路由别名(浏览器地址栏展示名称)// 别名的设置,如果设置了别名,通过push路径的方式,必须使用aliasPath的路径才能生效const router = createRouter({ routes:[{ name:'router1', //为了兼容其他端,此时的path不能少,必须和 pages.json中的页面路径匹配 path: "/pages/tabbar/tabbar-1/tabbar-1", aliasPath: '/tabbar-1', },]});// uni-simple-router路由跳转// aliasPath命名的路由 => name传递参数需 paramsthis.$Router.push({ name: 'detail', params: { id: 1 } })// 带查询参数,变成 /home/id=1 => path 对应query,params失效this.$Router.push({ path: '/pages/index/detail', query: { id: 1 }})2.4 H5端路由捕获所有路由或404路由path:'*' // 通常用于客户端404错误,如果是history模式,需要正确配置服务器path: '/detail-*'// 路由的优先级根据 定义的先后2.5 路由懒加载

打包构建应用时,Javascript包会变得非常大,影响页面加载,把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件。

const Foo = () => import('./Foo.vue') // 把组件按组分块 使用 命名 chunk const Foo = () => import(/*webpackChunkName:"group-foo"*/ './Foo.vue') const Bar = () => import(/*webpackChunkName:"group-foo"*/ './Bar.vue')三、小程序模式

注:小程序系列无法拦截原生tabbar及原生导航返回,如需拦截使用自定义tabbar、header

通过api进行切换时,像uni.switchTab()和this.$Router.pushTab()方法会触发拦截的;仅底部原生tabbar进行切换时不触发拦截

强制触发守卫:forceGuardEach(replaceAll, false) 每次调用api都会重新按流程触发已经

本文链接地址:https://www.jiuchutong.com/zhishi/310402.html 转载请保留说明!

上一篇:java中hashCode()是什么(java hash())

下一篇:python for循环遍历位置的查找(python for循环遍历)

  • 老师如何在QQ群发起打卡签到(老师如何在QQ群发起打卡)

    老师如何在QQ群发起打卡签到(老师如何在QQ群发起打卡)

  • ppt如何关闭自动播放功能(ppt如何关闭自动对齐)

    ppt如何关闭自动播放功能(ppt如何关闭自动对齐)

  • 小艺音响怎么连接网络呢(小艺音响怎么连接蓝牙)

    小艺音响怎么连接网络呢(小艺音响怎么连接蓝牙)

  • 微信的繁体字如何把它设置为普通字(微信的繁体字如何改成简体字)

    微信的繁体字如何把它设置为普通字(微信的繁体字如何改成简体字)

  • 剪映怎么涂鸦视频(剪映怎么涂鸦视频教程)

    剪映怎么涂鸦视频(剪映怎么涂鸦视频教程)

  • 微信视频号什么意思(微信视频号什么时候发作品容易上热门)

    微信视频号什么意思(微信视频号什么时候发作品容易上热门)

  • 表格出现e十17怎么取消(表格出现e+17怎么办)

    表格出现e十17怎么取消(表格出现e+17怎么办)

  • 闹钟的稍后提醒啥意思(闹钟的稍后提醒是多久)

    闹钟的稍后提醒啥意思(闹钟的稍后提醒是多久)

  • 钉钉看回放有时长记录吗(钉钉看回放有时长吗)

    钉钉看回放有时长记录吗(钉钉看回放有时长吗)

  • word2016文档的默认扩展名是什么(word2016文档的默认拓展名)

    word2016文档的默认扩展名是什么(word2016文档的默认拓展名)

  • aka-al10什么型号(aka--al10)

    aka-al10什么型号(aka--al10)

  • OPPOr15怎么没有微信美颜(oppor15怎么没有开发者选项)

    OPPOr15怎么没有微信美颜(oppor15怎么没有开发者选项)

  • 上传照片格式不对怎么办(上传照片格式不符合要求怎么办)

    上传照片格式不对怎么办(上传照片格式不符合要求怎么办)

  • 取消微信通话流量提醒(怎么关掉微信通话)

    取消微信通话流量提醒(怎么关掉微信通话)

  • 电脑远程连接不上怎么回事(电脑远程连接不上)

    电脑远程连接不上怎么回事(电脑远程连接不上)

  • 苹果7支持nfc功能吗(苹果7支持nfc功能怎么打开)

    苹果7支持nfc功能吗(苹果7支持nfc功能怎么打开)

  • 网速快下载慢怎么回事(网好下载速度慢)

    网速快下载慢怎么回事(网好下载速度慢)

  • 微博怎么找之前关注的人(微博怎么找之前的评论)

    微博怎么找之前关注的人(微博怎么找之前的评论)

  • 用什么软件写简历(用什么软件写简谱)

    用什么软件写简历(用什么软件写简谱)

  • 安装包没有签名文件怎么办(安装包没有签名文件怎么办oppo)

    安装包没有签名文件怎么办(安装包没有签名文件怎么办oppo)

  • 幻灯片触发器怎么设置(ppt触发器按钮在哪)

    幻灯片触发器怎么设置(ppt触发器按钮在哪)

  • 华为荣耀20i怎么清除后台(华为荣耀20i怎么刷机)

    华为荣耀20i怎么清除后台(华为荣耀20i怎么刷机)

  • qq发视频大小限制(qq发视频过大)

    qq发视频大小限制(qq发视频过大)

  • 苹果11支持双卡嘛(苹果11支持双卡不)

    苹果11支持双卡嘛(苹果11支持双卡不)

  • 迅雷影音如何加速播放(迅雷影音如何加载字幕文件)

    迅雷影音如何加速播放(迅雷影音如何加载字幕文件)

  • 荣耀手环怎么重启(荣耀手环怎么重新绑定手机)

    荣耀手环怎么重启(荣耀手环怎么重新绑定手机)

  • ipadair3是哪一年出的(ipadair3是2019年几月份出的)

    ipadair3是哪一年出的(ipadair3是2019年几月份出的)

  • vivo手机个人中心设置在哪(vivo手机个人中心在哪里找)

    vivo手机个人中心设置在哪(vivo手机个人中心在哪里找)

  • 华为手机安装不了微信如何办(华为手机安装不了外来软件)

    华为手机安装不了微信如何办(华为手机安装不了外来软件)

  • window10怎么调烟雾头(w10调烟头)

    window10怎么调烟雾头(w10调烟头)

  • 如何理解增值税中性特点
  • 旧机器设备出口
  • 所得税税负率是125正常吗
  • 个人所得税的税点是多少钱
  • 税收的本质是什么意思?
  • 出口退税货物的进项税处理
  • 增值税普通
  • 养猪场死猪处理方法
  • 收不回来的装修钱怎么办
  • 工资走公账和私账哪个好
  • 陈列费属于什么大类
  • 个人先进奖励要缴纳个税吗
  • 处置使用过的车辆
  • 公允价值模式下,投资性房地产不计提折旧或摊销
  • 股东参与经营可以分红吗
  • 资本公积和实收资本是什么意思
  • 收到投资款需要缴纳增值税吗
  • 土地增值税清算规程实施细则
  • 耕地占用税滞纳金是否能减免
  • 公司能否投资非盈利组织?如何做账
  • 已抵扣专用发票冲红怎么操作
  • 企业无法收回的账款
  • 机器设备的损耗属于什么会计科目类别
  • 集团公司向子公司收取管理费的法律规定
  • 贷款利息支出必须交税吗
  • 定额发票验旧怎么操作
  • 一般纳税人以清包工方式
  • 融资租入的固定资产视为承租企业的资产体现了什么原则
  • 完工百分比法确认收入应注意的问题
  • win10如何设置右键
  • 怎么写会计凭证
  • macos big sur更新后能改回来吗
  • 享受即征即退政策有效期到了还有效吗
  • 退多收款怎么做分录
  • linux不允许root登录
  • linux安装tk
  • PHP:pg_lo_truncate()的用法_PostgreSQL函数
  • php远程命令执行
  • 库存商品交增值税吗
  • 天堂之路歌曲
  • 尚硅谷百度贴吧
  • java后端代码例子
  • 现金折扣什么时候冲减收入
  • 前置测试模型
  • 企业所得税应按季预缴,年末汇算清缴
  • 根据sql脚本修改数据类型
  • 社会保险与商业人身保险的区别有
  • 小规模销售免税产品需要交税吗
  • 车船使用税和印花税谁交
  • 未开票的收入如何确认分录
  • 建筑行业如何结算工程款
  • 股权转让如何办理
  • 营改增后营业费用科目还有吗
  • 产品成本计算中最基本的方法是
  • 房屋租赁合同印花税谁交
  • 应付职工薪酬如何进行会计处理
  • mysql主键冲突但数据不存在
  • mysql5.7.17下载
  • sql分几类
  • mysql动态sql语句赋值
  • windows xp正式退休
  • macbookzen
  • ubuntu 16:9
  • windows7开机
  • win7任务栏还原到下面快捷键
  • windows打开
  • dos内部命令大全
  • python的判断语句
  • perl package
  • javascript零基础学要学多久
  • node中的ejs
  • js实现回文
  • jQuery Tags Input Plugin(添加/删除标签插件)详解
  • android activity finish
  • python内置数据结构有哪些
  • 留抵税额可以留抵多久
  • 如何查到银行
  • 国网成都市局和绵阳市局的区别?
  • 江西各市财政收入和支出
  • 北京市税务局热搜
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设