uni - app 路由与页面跳转

最新推荐文章于 2025-03-18 10:25:14 发布

前端施工员

最新推荐文章于 2025-03-18 10:25:14 发布

阅读量288

点赞数

分类专栏： Uni-app 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/qq_25906119/article/details/128845591

版权

Uni-app 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了uni-app中三种页面跳转方式：内置组件navigator的navigate、redirect和switchTab，以及APIuni.navigateTo的使用。同时详细阐述了如何在页面间传递参数，包括onLoad事件获取参数、事件通道进行数据通信的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 内置组件跳转

官方文档：navigator | uni-app官网

示例：

<navigator url="navigate/navigate?title=navigate" >
	<button type="default">跳转到新页面</button>
</navigator>


<navigator url="redirect/redirect?title=redirect" open-type="redirect" >
	<button type="default">在当前页打开</button>
</navigator>
				

<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab">
	<button type="default">跳转tab页面</button>
</navigator>

2. Api 跳转

官方文档：uni.navigateTo(OBJECT) | uni-app官网

示例：

//在起始页面跳转到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); //打印出上个页面传递的参数。
	}
}

3. 页面跳转传参方式

1. onLoad 可获取到其他页面跳转传入的参数 option（小程序中可以使用）

除了跳转传入参数以外，还可以跳转传入函数：

页面可通过 this.getOpenerEventChannel().emit 触发函数

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: 'pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

2. this.$route 获取到路由信息（小程序不可以使用，强行用的话只能装插件）

    mounted() {
      console.log(this.$route)
    }