uni-app uses navigation's routing and page jumps

a Similar to tags in HTML ,

1. Navigate page jump

1.Attribute description

attribute name	type	default value	illustrate	Notice	Platform differences
url	String		Jump within the application, the value is an absolute path or a relative path, such as: '…/login/login' or '/pages/login/login'	You cannot add .vuea suffix, otherwise the jump will not be successful.
open-type	String	navigate	Jump method
delta	Number	1	Valid when open-type is 'navigateBack', indicating the number of layers to roll back
hover-class	String	navigator-hover	Specify the style class when clicked. There will be no click effect when hover-class="none" is set.

2.open-type valid values ​​(commonly used)

value	illustrate	illustrate	Platform differences explained
navigate	Corresponding to the function of uni.navigateTo	Jump to page
redirect	Corresponding function of uni.redirectTo	Open on current page
switchTab	Corresponds to the function of uni.switchTab	Jump to tab page
reLaunch	Corresponding to the function of uni.reLaunch		ByteDance mini program and Feishu mini program are not supported
navigateBack	Corresponds to the function of uni.navigateBack

3. About url length limit (solution: page communication , global variables , 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.注意:

• Jump tabbarpage, must be setopen-type="switchTab"

• navigator-hoverBy default {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> the background color of child nodes should be transparent.

• navigator-open-typeIf the attribute uses the corresponding value, the function of the corresponding value will 高于correspond 跳转路径.

• app-nvue The platform is only supported by pure nvue projects ( render为native) <navigator>. If render is not native, nvue does not support the navigator component, please use APIjump.

• To exit the application under app, you can use plus.runtime.quit on the Android platform. iOS has no concept of exiting an app.

• uLinknavigator组件Yes , the component is 增强版underlined in the style. Functionally, it supports opening online web pages, schemas of other apps, sending emails via mailto, and making calls via tel.

• Due to the need for SSR in the Vue3 project, the H5 end will nest the a tag in the outer layer.

2. Route jump (programmatic jump)

1.navigateTo

Keep the current page, jump to a page in the application, and use it uni.navigateBackto return to the original page.
urlThe passed parameters onLoadare received during the life cycle

//在起始页面跳转到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. Redirect to a new page (redirectTo)

Close the current page and jump to a page within the app.

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

3. Jump to the tabBar page (switchTab)

注意:

navigateTo, redirectToOnly 非 tabBar pages can be opened.
switchTab Only tabBarpages can be opened.
reLaunch The page can be opened 任意.
The at the bottom of the page tabBaris determined by the page, that is, as long as it is defined as tabBara page, it will be at the bottom tabBar. Page jumps
cannot be made in . Afterwards, the page stack will disappear and you cannot return at this time. If you must return, you can use navigation to other history records of the browser. App.vue
H5端页面刷新navigateBackhistory.back()