位置: 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)

  • 异地存货怎么审计
  • 车船使用税2021
  • 应交税费科目的借贷方向
  • 购买福利用品
  • 印花税自查补缴要先申报吗
  • 销项减进项余额在哪方
  • 跨年的费用怎么调整
  • 发生销售折让时为什么不冲减成本
  • 支票撕碎了怎么办
  • 分公司成立时的法人是谁
  • 租金收入个人所得税
  • 记账凭证摘要的重要性
  • 信用卡产生滞纳金
  • 转售水的税率
  • 房地产企业土地增值税
  • 一般纳税人简易征收3%
  • 没进项发票要交多少税
  • 一般纳税人和小微企业的区别
  • 坏账处理的所得税税率
  • 文化建设事业费优惠政策
  • 增值税罚款怎么做凭证
  • 出口退税计算方法是免退税吗
  • 农产品免税产品可以开增值税专用发票吗
  • 怎么判断企业是一般纳税人还是小规模
  • mac app store一直转圈圈
  • 王者荣耀中扁鹊的克星是谁
  • 经营出租的机器设备需要计提折旧吗
  • 债劵利息怎么计算
  • uniapp接入支付宝
  • 发行股票溢价计入哪里
  • 发票已认证当月未申报怎么办
  • 税控盘每年的服务费可以抵扣吗
  • php生成表格
  • 电子发票记账清单入账
  • 微信小店的入口在哪里
  • 3d representation
  • react组件constructor
  • Windows 10 python 3.9安装运行Mockingbird--拎包入住功略
  • 金蝶销售明细查不出来
  • 增值税普通发票可以抵扣吗
  • 认缴制对实务操作的可能影响有哪些?
  • 冲暂估会计分录
  • 关于在使用手机
  • 织梦怎么改网站主页
  • php指定域名访问
  • 盈余公积和资本溢价
  • 个税累计预扣法导致税交多了
  • 取得的增值税普通发票丢了怎么办理
  • 其他应付款里借方有余额代表什么
  • 以红字冲回
  • 预收账款可以长期挂账吗
  • 暂估入账跨年如何红冲
  • 合作研究开发项目的合同
  • 长期借款的账务处理会计分录
  • 养猪场财务账目怎么做
  • 无形资产研究阶段发生的支出应该全部费用化
  • 报废车收到的钱怎么做账
  • 开了发票就要交税吗?
  • 什么是对公账户?
  • xp系统可以双屏吗
  • linux详解
  • 重装系统前 病毒怎么办
  • win7 64位系统只有搜狗浏览器可以打开网页其他浏览器打不开的故障原因及解决方法
  • win10更新后qq打不开
  • win10怎么启用网卡
  • 一个简单的微笑说说
  • 用户体验ui
  • web前端开发工具哪个好
  • js实现滑块拖动
  • u3d unity3d
  • jquery的validate前端表单验证
  • 安卓listview控件map的用法前面每行加图片
  • javascript常见问题
  • android系统内核基于什么操作系统?
  • 2021税务公告
  • 天津电子税务局ca证书
  • 四川灵活就业医保每月返多少钱
  • 济南高新区地税局地址
  • 贵阳地铁报销凭证
  • 中国涉农金融体系包括哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设