一、navigate页面跳转

1.属性说明

属性名	类型	默认值	说明	注意
url	String		应用内跳转,值为绝对路径或相对路径,如: ‘…/login/login’ 或’/pages/login/login’	不能加`.vue`后缀,否则跳转不成功
open-type	String	navigate	跳转方式
delta	Number	1	当open-type为’navigateBack’时有效,表示回退的层数
hover-class	String	navigator-hover	指定点击时样式类,设置hover-class="none"时无点击效果

2.open-type有效值(常用)

值	说明	说明	平台差异说明
navigate	对应 uni.navigateTo 的功能	跳转到页面
redirect	对应 uni.redirectTo 的功能	在当前页打开
switchTab	对应 uni.switchTab 的功能	跳转到tab页面
reLaunch	对应 uni.reLaunch 的功能		字节跳动小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能

3.关于url长度限制(解决办法:页面通信、全局变量、encodeURIComponent)

<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// navigate.vue页面接受参数
onLoad: function (option) {
    
    
	const item = JSON.parse(decodeURIComponent(option.item));
}

`3.注意`:

跳转tabbar页面，必须设置open-type="switchTab"
navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> 的子节点背景色应为透明色。
navigator-open-type属性如果使用对应的值，则对应值的功能会高于对应跳转路径。
app-nvue 平台只有纯nvue项目（render为native）才支持 <navigator>。非render为native的情况下，nvue暂不支持navigator组件，请使用API跳转。
app下退出应用，Android平台可以使用plus.runtime.quit。iOS没有退出应用的概念。
uLink组件是navigator组件的增强版，样式上自带下划线，功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。
Vue3 项目因 SSR 需要，H5 端会在外层嵌套 a 标签

二、路由跳转(编程式跳转)

1.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
url传递的参数,在onLoad生命周期进行接收

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

// 在起始页面跳转到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.重定向到新页面(redirectTo)

关闭当前页面，跳转到应用内的某个页面。

<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
<script>
	goMessage () {
      
      
	  uni.switchTab({
      
      
	    url: '/pages/message/message'
	  })
	}
</script>

3.跳转到tabBar页面(switchTab)

`注意:`

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
不能在 App.vue 里面进行页面跳转。
H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

uni-app使用navigate的路由与页面跳转

关于uni-app使用navigate的路由与页面跳转