位置: IT常识 - 正文

uniapp路由—— uni-simple-router(uniapp route)

编辑:rootadmin
uniapp路由—— uni-simple-router

推荐整理分享uniapp路由—— uni-simple-router(uniapp route),希望有所帮助,仅作参考,欢迎阅读内容。

uniapp路由—— uni-simple-router(uniapp route)

文章相关热门搜索词:uni-app路由,uniapp的路由跳转,uniapp的路由跳转,uniapp常见的路由与页面跳转api,uniapp获取路由参数,uniapp的路由跳转,uni-app路由,uniapp的路由跳转,内容如对您有帮助,希望把文章链接给更多的朋友!

要在uniapp中使用路由守卫,uniapp原生的api是比较欠缺的,所以要用‘uni-simple-router’插件包

安装 // 项目根目录执行命令行npm install uni-simple-router// 根据pages.json总的页面,自动构建路由表npm install uni-read-pages配置vue.config.js

注:如果根目录没有vue.config.js文件,要手动创建

// vue.config.jsconst TransformPages = require('uni-read-pages')const { webpack } = new TransformPages()module.exports = {configureWebpack: {plugins: [new webpack.DefinePlugin({ROUTES: webpack.DefinePlugin.runtimeValue(() => {const tfPages = new TransformPages({includes: ['path', 'name', 'aliasPath','meta']});return JSON.stringify(tfPages.routes)}, true)})]}}在router文件夹 下对应的 js文件 中写如下代码import { RouterMount, createRouter } from 'uni-simple-router';const router = createRouter({platform: process.env.VUE_APP_PLATFORM,routes: [...ROUTES]});//全局路由前置守卫router.beforeEach((to, from, next) => {//权限控制登录if(to.meta.auth){console.log("需要登录");if("token"){next();}else{console.log("请登录");}}else{console.log("不需要登录"); next();}console.log("前置守卫"+JSON.stringify(to));});// 全局路由后置守卫router.afterEach((to, from) => {console.log('跳转结束')})export {router,RouterMount}main.jsimport {router,RouterMount} from './router/router.js' //路径换成自己的Vue.use(router)//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式// #ifdef H5RouterMount(app,router,'#app')// #endif// #ifndef H5app.$mount(); //为了兼容小程序及app端必须这样写才有效果// #endif  page.json{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","name": "index","style": {"navigationBarTitleText": "uni-app"}}, {"path": "pages/home/home","name": "home","meta": {"auth": false, //需要登录"async": true, //是否同步"title": "首页", //标题"group": "商城" //分组},"style": {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path": "pages/haha/haha","name": "haha","meta": {"auth": true, //需要登录"async": true, //是否同步"title": "首页", //标题"group": "商城" //分组},"style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}}  页面跳转和参数接收push()pushTab() : 跳转tar栏replace() : 替换replaceAll() : 替换所有back() : 直接带上数字返回第几层注意:path和query配合使用,而name和params配合使用//通过name方式跳转this.$Router.push({name: 'home',params: {name: 'Joseph',age: 22}})------------------------------------//通过path形式进行跳转this.$Router.push({ path: '/pages/haha/haha', query: { name: 'Josdep33333h', age: 24 }})-------------------------------------//用uni形式跳转到新页面,并传递参数uni.navigateTo({url:'/pages/home/home?id=2&name=Josep33333h'}); 获取参数onLoad(option) {//原生获取数据console.log("zz",option);// query传参 const query=this.$Route.queryconsole.log(query); // params传参 const params=this.$Route.paramsconsole.log(params);}
本文链接地址:https://www.jiuchutong.com/zhishi/290659.html 转载请保留说明!

上一篇:免费镜像 ChatGPT 网站随你挑和分享一批可用的 API Keys(免费镜像翻转软件)

下一篇:Vue2 大型项目升级 Vue3 详细经验总结(vue2升级3)

  • 小天才电话手表怎么换卡(小天才电话手表隐藏功能)

    小天才电话手表怎么换卡(小天才电话手表隐藏功能)

  • 黑鲨4spro怎么开nfc(黑鲨四怎么开启游戏模式)

    黑鲨4spro怎么开nfc(黑鲨四怎么开启游戏模式)

  • 荣耀30有单独的3.5mm耳机孔吗(荣耀30有单独的3g手机吗)

    荣耀30有单独的3.5mm耳机孔吗(荣耀30有单独的3g手机吗)

  • 苹果手机怎么下载大于100m(苹果手机怎么下载安卓app并安装)

    苹果手机怎么下载大于100m(苹果手机怎么下载安卓app并安装)

  • w500笔记本能用固态硬盘吗(笔记本电脑500w)

    w500笔记本能用固态硬盘吗(笔记本电脑500w)

  • 电脑显示器三秒就灭了(电脑显示器三秒关机)

    电脑显示器三秒就灭了(电脑显示器三秒关机)

  • 苹果手机录屏后的视频怎么没了(苹果手机录屏后找不到 去哪里找)

    苹果手机录屏后的视频怎么没了(苹果手机录屏后找不到 去哪里找)

  • mate30天气怎么显示在桌面上(mate30pro天气设置)

    mate30天气怎么显示在桌面上(mate30pro天气设置)

  • 扩容卡和内存卡啥区别(扩容卡和内存卡如何区别)

    扩容卡和内存卡啥区别(扩容卡和内存卡如何区别)

  • 为什么快手极速版绑定不了微信(为什么快手极速版老是跳广告)

    为什么快手极速版绑定不了微信(为什么快手极速版老是跳广告)

  • qq历史头像删除还原(qq历史头像删除了还能找到吗)

    qq历史头像删除还原(qq历史头像删除了还能找到吗)

  • 小米wifi放大器pro连接超时(小米wifi放大器pro指示灯不亮)

    小米wifi放大器pro连接超时(小米wifi放大器pro指示灯不亮)

  • 抖音访客怎么查询(抖音访客怎么查具体时间)

    抖音访客怎么查询(抖音访客怎么查具体时间)

  • 手机下载不了微信怎么回事(手机下载不了微课掌上通)

    手机下载不了微信怎么回事(手机下载不了微课掌上通)

  • 淘宝店注销后多久才能开店啊(淘宝店注销后多久可以改名字)

    淘宝店注销后多久才能开店啊(淘宝店注销后多久可以改名字)

  • 七彩虹显卡ultra什么意思(七彩虹显卡ultra和其他什么区别)

    七彩虹显卡ultra什么意思(七彩虹显卡ultra和其他什么区别)

  • volte4g是什么手机(volte4g智能手机)

    volte4g是什么手机(volte4g智能手机)

  • 微信交易明细删除了 还可以查的到吗(微信交易明细删除了还能查到吗)

    微信交易明细删除了 还可以查的到吗(微信交易明细删除了还能查到吗)

  • wps缓存文件在哪(wps文件缓存是什么意思)

    wps缓存文件在哪(wps文件缓存是什么意思)

  • wd10ezex是不是叠瓦(wd10jpvx是叠瓦盘吗)

    wd10ezex是不是叠瓦(wd10jpvx是叠瓦盘吗)

  • 怎么把ipad照片传到电脑(怎么把ipad照片传到oppo手机)

    怎么把ipad照片传到电脑(怎么把ipad照片传到oppo手机)

  • 电脑上怎么合并音乐(电脑上怎么合并多个文档)

    电脑上怎么合并音乐(电脑上怎么合并多个文档)

  • 苹果官网保修是什么意思(iphone官网保修期)

    苹果官网保修是什么意思(iphone官网保修期)

  • 乐视充电慢怎么办(乐视充电慢怎么回事)

    乐视充电慢怎么办(乐视充电慢怎么回事)

  • 小米手机wifi已连接,但无法访问互联网(小米手机wifi已保存已停用怎么回事)

    小米手机wifi已连接,但无法访问互联网(小米手机wifi已保存已停用怎么回事)

  • iphone网易云会员退订(iphone网易云会员过期下载的歌能听吗)

    iphone网易云会员退订(iphone网易云会员过期下载的歌能听吗)

  • 如何使用strip在python中删除?(strippped)

    如何使用strip在python中删除?(strippped)

  • 增值税的计税金额
  • 关联方需要计提坏账准备吗?
  • 款项已付发票未到,怎么做凭证
  • 应收款项出售的分录怎么处理
  • 行政事业性收费票据
  • 核销债权债务依据
  • 回收废品残料会计分录
  • 公摊电费计入什么科目
  • 结转已到期未兑付怎么办
  • 发票开出来对方不走账会怎么样?
  • 低值易耗品一次性摊销体现重要性
  • 支付给银行的借款利息属于什么会计要素
  • 营改增后接受实物投资是否需要缴纳增值税?
  • 转让商业承兑汇票显示银行拒绝交易
  • 补交以前年度工会经费所得税如何申报
  • 理财赎回本金没赎回利息咋办
  • 暂估收入的凭证怎么做
  • 进项和销项的会计分录
  • 支付个人利息没有取得发票
  • 一般纳税人附加税费减免政策
  • 在win7系统中将打开窗口拖到屏幕顶端
  • 在Win10系统中卸载最近更新的补丁并重启电脑
  • linux怎么设置
  • 民办非企业年底额度不能低于多少
  • 事业单位非税收入怎么做账
  • VMware虚拟机中怎么复制粘贴
  • dc.exe是什么程序
  • linux怎么启动.sh文件
  • 未结算未取得发票怎么办
  • 财务报表的组成部分
  • php编程入门指南
  • PHP:checkdate()的用法_Date Time函数
  • 未取得合法凭证税前扣除
  • 前端调用后端代码
  • 零申报怎么做报表
  • 帝国cms怎么上传图片
  • 网站为什么需要备案
  • 补缴以前年度企业所得税如何做账
  • 理财利息可以计息吗
  • 厂房建设包括哪些
  • 销售价格含税的会计分录
  • 固定资产折旧计算表模板
  • 跨年认证原材料是什么
  • 异地多缴纳预缴税怎么退
  • 经营性应付项目的增加为什么调减
  • 家庭分割财产怎么处理
  • 费用报销的程序是什么
  • 安防工程的注意事项
  • 建筑安装主要做什么
  • 生产成本有贷方余额怎么调整
  • 其他债权投资的特征有哪些
  • 私募基金公司收入高吗
  • 购买无形资产的手续费计入
  • 丢失的发票怎么查询
  • 现金日记账需要日清月结吗
  • 其他应付款时间长了怎么处理?
  • 利得与损失的四种类型
  • mysql提高效率
  • mysql有哪些数据类型,有哪些运算符
  • sql合并字段
  • mysql 1290怎么解决
  • win7鼠标右键一闪就没了
  • avgcc32.exe进程是什么文件产生的 avgcc32进程信息查询
  • win8电脑网络受限
  • macos使用方法
  • shstart.exe - shstart是什么进程 有什么用
  • 如何在linux系统中卸载一个已装载的文件系统
  • unity3d ide
  • jquery easyui开发指南
  • jQuery ajax的功能实现方法详解
  • shell脚本监控进程
  • linux自启命令
  • fw开发
  • 12366纳税服务平台人工时间
  • 成都税务举报官网
  • 浙江省个人医保累计自费多少可以报销
  • 发票真伪查询国税官网12366
  • 仪征十大名人是哪些人
  • 煤矸石征收资源税吗
  • 从租计征房产税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设