专栏首页达达前端uniapp 路由与页面跳转

uniapp 路由与页面跳转

uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

url有长度限制,太长的字符串会传递失败,可使用窗体通信全局变量,或encodeURIComponent等多种方式解决,如下为encodeURIComponent示例。

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// 在test.vue页面接受参数
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}
  • 页面跳转路径有层级限制,不能无限制跳转新页面
  • 跳转到 tabBar 页面只能使用 switchTab 跳转
  • 路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url,在App平台可以使用 plus.runtime.openURL或web-view组件;H5平台使用 window.open;小程序平台使用web-view组件(url需在小程序的联网白名单中)。在hello uni-app中有个组件ulink.vue已对多端进行封装,可参考。

uni.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面。

uni.reLaunch(OBJECT) 关闭所有页面,打开到应用内的某个页面。

uni.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

uni.navigateBack(OBJECT) 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

不能在 App.vue 里面进行页面跳转。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序面试

    如何实现下拉刷新 app.json或者页面的json中配置enablePullDownRefresh为true 使用onPullDownRefresh 函数...

    达达前端
  • 微信小程序优化uni-app

    onLaunch 当uni-app初始化完成时触发 onShow 当uni-app启动,或从后台进入前台显示 onHide 当uni-app从前台进入后台

    达达前端
  • uni-app页面生命周期

    onLoad 监听页面加载 onShow 监听页面显示 onReady 监听页面初次渲染完成

    达达前端
  • 美团小程序框架mpvue蹲坑指南

    然后就开始用wepy搭项目,写静态页面(由于公司的开发模式是先写静态页面, 等待后端的同学接口出来了再绑定数据),虽然wepy用起来比原生的顺手, 但是还是有很...

    前端博客 : alili.tech
  • 诡异的【session丢失】和【<img src="">标签】

         项目发布到服务器上面了,但是客户在使用的时候发现,只要进入新增页面和修改页面。再进行操作就会自动跳转到登陆页面(我设置了session保存用户登陆信息...

    菩提树下的杨过
  • 使用easyswoole开发多进程多协程队列式爬虫

    这里我推荐http://www.querylist.cc/  可使用jq的语法选择html页面的元素,非常好用

    仙士可
  • 【Mockplus教程】分组

    为了更好的管理和组织多个页面,可以选择将页面分组。 选择多个页面,然后使用右键点击后,在弹出的菜单中选择“将页面归类到新分组”。 完整演示如下: ?

    奔跑的小鹿
  • 我们平时是怎么写html和css的?

    文章的起因,我只是为了回复一个帖子,http://bbs.csdn.net/topics/390908928?page=1

    bear_fish
  • 微信小程序从子页面退回父页面时的数据传递

    我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数...

    一斤代码
  • 操作系统核心原理-5.内存管理(中):分页内存管理

    在上一篇介绍的几种多道编程的内存管理模式中,以交换内存管理最为灵活和先进。但是这种策略也存在很多重大问题,而其中最重要的两个问题就是空间浪费和程序大小受限。那...

    Edison Zhou

扫码关注云+社区

领取腾讯云代金券