uni-app utiliza enrutamiento de navegación y saltos de página

a Similar a las etiquetas en HTML ,

1. Navegar por el salto de página

1.Descripción del atributo

Nombre del Atributo	tipo	valor por defecto	ilustrar	Aviso	Diferencias de plataforma
URL	Cadena		Salte dentro de la aplicación, el valor es una ruta absoluta o relativa, como por ejemplo: '…/login/login' o '/pages/login/login'	No puede agregar .vueun sufijo; de lo contrario, el salto no se realizará correctamente.
de tipo abierto	Cadena	navegar	método de salto
delta	Número	1	Válido cuando el tipo abierto es 'navigateBack', lo que indica el número de capas a revertir
clase flotante	Cadena	flotador del navegador	Especifique la clase de estilo al hacer clic. No habrá efecto de clic cuando se establezca hover-class="none".

2.valores válidos de tipo abierto (de uso común)

valor	ilustrar	ilustrar	Diferencias de plataforma explicadas
navegar	Correspondiente a la función de uni.navigateTo	Saltar a la página
redirigir	Función correspondiente de uni.redirectTo	Abrir en la página actual
cambiarpestaña	Corresponde a la función de uni.switchTab	Saltar a la página de pestañas
relanzar	Correspondiente a la función de uni.reLaunch		El mini programa ByteDance y el mini programa Feishu no son compatibles
navegarVolver	Corresponde a la función de uni.navigateBack

3. Acerca del límite de longitud de la URL (solución: comunicación de página , variables globales , 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.注意:

• Página de salto tabbar, debe configurarseopen-type="switchTab"

• navigator-hoverDe forma predeterminada {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> el color de fondo de los nodos secundarios debe ser transparente.

• navigator-open-typeSi el atributo usa el valor correspondiente, la función del valor correspondiente 高于corresponderá 跳转路径.

• app-nvue La plataforma sólo es compatible con proyectos puros de nvue ( render为native) <navigator>. Si el renderizado no es nativo, nvue no admite el componente del navegador, utilice APIjump.

• Para salir de la aplicación en app, puede usar plus.runtime.quit en la plataforma Android. iOS no tiene ningún concepto de salir de una aplicación.

• uLinknavigator组件Sí , el componente está 增强版subrayado en el estilo. Funcionalmente, admite abrir páginas web en línea, esquemas de otras aplicaciones, enviar correos electrónicos a través de mailto y realizar llamadas a través de tel.

• Debido a la necesidad de SSR en el proyecto Vue3, el extremo H5 anidará la etiqueta a en la capa exterior.

2. Salto de ruta (salto programático)

1.navegar a

Mantenga la página actual, salte a una página de la aplicación y utilícela uni.navigateBackpara volver a la página original.
urlLos parámetros pasados onLoad​​se reciben durante el ciclo de vida.

//在起始页面跳转到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. Redirigir a una nueva página (redirectTo)

Cierre la página actual y salte a una página dentro de la aplicación.

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

3. Saltar a la página de la barra de pestañas (switchTab)

注意:

navigateTo, redirectToSólo 非 tabBar se pueden abrir páginas.
switchTab Sólo tabBarse pueden abrir páginas.
reLaunch La página se puede abrir 任意.
La parte inferior de la página tabBarestá determinada por la página, es decir, siempre que esté definida como tabBaruna página, estará en la parte inferior tabBar.
No se pueden realizar App.vuesaltos de página en formato .
H5端页面刷新Luego, la pila de páginas desaparecerá y navigateBackno podrá regresar en este momento. Si debe regresar, puede usar history.back()la navegación a otros registros del historial del navegador.