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

  • 新办企业购置设备怎么抵税
  • 企业清算分配要交所得税吗
  • 出口货物适用什么税率
  • 国际重复征税解决方法有
  • 所得税费用是哪类科目
  • 公司的社保缴费基数不是工资数
  • 进项税需要转出吗
  • 系统集成 税点
  • 清算期间,公司是否可以经营
  • 辅导期一般纳税人管理办法
  • 银行转账结算方式的种类及适用范围
  • 受托代为投资账务处理
  • 出口退税会计处理全部流程
  • 收到加工劳务发票怎么做
  • 出口退税销项税额计算公式
  • 刷卡手续费可以开经纪代理服务费吗
  • 农产品收购发票怎么抵扣
  • 成本费用调整法
  • 暂估入库冲回有差额
  • 其他收益科目核算
  • 税盘服务费抵税分录
  • 坏账准备转回影响应交所得税吗
  • 营改增后的增值税税率
  • 财务负责人的岗位
  • 职工福利费的会计科目是什么
  • 免费样品费计入什么科目
  • 收到地税退税会计分录
  • mac系统屏幕
  • 销售免费样品账务处理
  • 电脑虚拟内存不够
  • 用产品抵债的合同怎么写
  • PHP:stream_socket_pair()的用法_Stream函数
  • 外汇收入情况说明
  • win7纯净版系统官网
  • php 首字母大写
  • 投资公司要具备什么
  • 登记会计账簿的作用
  • mysql事务执行流程
  • vue从入门到精通教程
  • yolov5 教程
  • 工会经费怎么上缴
  • 服务类收入确认
  • python的用途
  • 合作卖东西怎么分成
  • python3 静态方法
  • python抛出异常
  • 减免申报明细表怎么填
  • mysql命令行怎么用
  • 房租押金可以要回来吗
  • 工程施工与工程结算账务处理
  • 直接转销法还允许使用吗
  • 哪种发票可以报税
  • 小规模企业没有账,税务会查账吗
  • 广告发票能抵扣吗
  • 存货的盘盈
  • 待发货订单是什么意思
  • 客户要赔偿怎么回复
  • 银行账户是不是卡号
  • 如何跨数据库查询
  • mac安装mysql没看见初期密码
  • win2000系统
  • win2008下的HPC群集是什么有什么作用
  • winsock2
  • Win10 PC RS2快速预览版14926更新与修复内容汇总
  • js跨域解决方案有哪些
  • js 数组 增加元素
  • jquery 选择
  • 结合mint-ui移动端下拉加载实践方法总结
  • 获取nodejs命令行信息
  • unity sp
  • unity中播放视频
  • android design库
  • 置顶的朋友圈屏蔽的人能看到吗
  • dos help命令
  • 编写一个python函数is_multiple
  • 海口市地税局高峰简历
  • 福建通用定额发票查询
  • 四川地方税务 副局长 晓宏
  • 大同县税务局
  • 珠宝消费税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设