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

  • 房屋租赁服务增值税税率是多少
  • 一般纳税人的现金收入
  • 高新技术企业享受15%税率优惠的条件
  • 延期申报后可否延期缴纳税款
  • 先包装后销售先销售后包装的消费税处理
  • 企业所得税包含哪些税种
  • 电子承兑汇票贴现流程
  • 个税为负数如何申报
  • 城建税计税依据扣除增值税期末留抵
  • 公司转给法人备注怎么填
  • 进料料件内销账务处理怎么做?
  • 农业企业土地租金会计分录
  • 代收水电气费加盟
  • 劳动合同的主要条款
  • 税控技术服务
  • 增值税专用发票几个点
  • 增值税发票收款人和复核人可以一个人吗
  • 汇总缴纳增值税如何申报
  • 一般纳税人增值税怎么做账务处理
  • 三证合一后纳税人识别号和信用代码一样吗
  • 提现的现金支票是什么
  • 外帐如何暂估应付账款
  • 股权并购和资产的关系
  • 利润总额就是会计准则吗
  • 免税企业进项怎么处理
  • 公益事业捐赠
  • 如何在Windows 11上卸载更新
  • 中秋福利发放现金文案怎么写
  • 公司收到医疗保障局打入的钱怎么做账
  • 公司入股的钱叫什么
  • 劳务公司怎么做进项
  • icm是什么文件
  • 豹七三七粉的价格
  • 园林绿化工程公司简介范文
  • 增值税发票超额后税率
  • 新西兰南岛西南部
  • 销售使用过的固定资产3%减按2%
  • 社保缴费基数如何调整
  • maven jni
  • 记账凭证的主要作用有
  • 员工辞退补偿金扣个税吗
  • 网上报税教程
  • 计提的坏账准备计入什么科目
  • 劳务费个税申报流程
  • 差旅费单子格式表
  • 当月开票可以当月勾选吗
  • 已收款未开票未发货能确认收入吗
  • 经营租赁属于什么收入
  • 未收到货款发票是什么意思
  • 佣金如何做账分录
  • 固定资产的维修计入什么科目
  • 购买设备的运费增值税计入成本吗
  • 弥补亏损后怎么做账
  • 会计账本是一年一本吗
  • mysql数据库定时备份脚本
  • 在windows中在下列叙述中正确的是
  • win8系统无线网找不到
  • samba开启
  • freebsd ports安装
  • winpe安装系统教程
  • win7应用程序无法正常启动
  • lsass.exe是什么病毒
  • win8无法识别存档文件
  • Win10 Mobile Redstone预览版14291上手体验评测
  • android.json
  • python的判断语句
  • jQuery Password Validation密码验证
  • angularjs2
  • linux中的shell命令
  • javascript的
  • 完美解决usb电涌15秒后关机
  • 全国企业信用信息系统网官网
  • 供暖配套费
  • 餐饮专票可以抵扣吗
  • 国家税务总局纳税服务司罗名
  • 广西税务申报增值税时为什么打开表格时总是加载中
  • 福建社保官方网站
  • 山东省地税局电话号码
  • 种子在什么情况下能发芽
  • 财税知识
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设