Notas de estudio de desarrollo de base cero de Uniapp (8) -Componente de salto de página y uso práctico de API
1.componente de salto de página del navegador
el navegador es una etiqueta de salto de página, que se puede agregar antes y después de la etiqueta del botón.
Este componente es similar al componente <a> en HTML, pero solo puede saltar a páginas locales. La página de destino debe estar registrada en páginas.json.
La función de este componente está disponible en modo API, consulte también: https://uniapp.dcloud.io/api/router?id=navigateto
Típico aplicaciones: < /span> Código de muestra navegar hacia atrás (rebobinar) se utiliza junto con el número de nivel delta Otros métodos incluyen redirigir (redirigir la página actual), switchtab (cambiar de pestaña) Relanzar (cerrar otros Cargar esta página), tipo abierto: modo de salto, el valor predeterminado es navegar
Escriba la dirección de salto en la URL y la página debe registrarse en páginas.json.
<view class="btn-area">
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
<button type="default">跳转tab页面</button>
</navigator>
</view>
Descubrí que el salto no estaba implementado. Revisé Internet y dije que si hay esta página en la barra de pestañas, se debe usar switchTab.
Simplemente cambie el tipo de apertura a switchTab y funcionará
<navigator url="/pages/index/index" open-type="switchTab" hover-class="navigator-hover">
<button type="primary" @click="switchTo">跳转到新页面</button>
</navigator>
2. API de enrutamiento y salto de página
Dirección del tutorial:https://uniapp.dcloud.net.cn/api/router.html#navigateto
uni.navigateTo(OBJECT )
Mantenga la página actual y salte a una página en la aplicación. Utilice uni.navigateBack para regresar a la página original.
uni.redirectTo(OBJECT)
Cierra la página actual y salta a una página dentro de la aplicación.
uni.reLaunch(OBJECT)
Cierra todas las páginas y abre una página dentro de la aplicación.
Nota: Si se llama a uni.preloadPage(OBJECT) (se abre en una nueva ventana), no se cerrará y solo se activará el ciclo de vida onHide.
uni.switchTab(OBJECT)< /span> uni.navigateBack(OBJECT)< /span> Según el uso anterior, también es posible agregar un evento de clic al botón y asociarlo con switchTo y usar la API para saltar. La precarga de páginas es una tecnología de optimización del rendimiento. Las páginas precargadas se abren más rápido. uni.preloadPage(OBJECT) Cierra la página actual y regresa a la página anterior o a la página de varios niveles. Puede obtener la pila de páginas actual a través de getCurrentPages() y decidir cuántos niveles devolver. Nota: Si se llama a uni.preloadPage(OBJECT) (se abre en una nueva ventana), no se cerrará y solo se activará el ciclo de vida onHide.
Vaya a la página TabBar y cierre todas las demás páginas que no sean TabBar.
switchTo() {
uni.switchTab({
url:"/pages/login/login"
})
}
Puede pasar parámetros al saltar a la página, por ejemplo, pasar el nombre de usuario nombre de usuario y la ciudad de usuario donde se encuentra el usuario, de user.vue a city.vue
export default {
data() {
return {
userinfo:{
name:"a123",city:"beijing"}
}
},
methods: {
switchTo() {
uni.switchTab({
url:"/pages/login/login"
})
},
naviTo() {
var urluser1 ="/pages/city/city"
var urluser =urluser1+"?username="+this.userinfo.name+"&usercity="+this.userinfo.city;
console.info(urluser)
uni.navigateTo({
url:urluser
})
}
}
Vincula naviTo al evento de clic del botón y la función de respuesta es naviTo print terminal:
/pages/city/city?username=a123&usercity=beijing en páginas/ descubrimiento /discovery.vue:79
El nombre de usuario y la ciudad de usuario se pasan correctamente, pero la función de recepción no está escrita en la página de la ciudad en este momento, por lo que la página todavía está
Por lo tanto, en city.vue Parámetros recibidos por la carga del evento Onload cuando se inicia la página
Agregar contenido en city.vue:
<script>
export default {
data() {
return {
userinfo:{
name:"未知",city:"未知"}
};
},
onLoad: function (option) {
//option为object类型，会序列化上个页面传递的参数
console.info(option.username); //打印出上个页面传递的参数。
console.info(option.usercity); //打印出上个页面传递的参数。
this.userinfo.name=option.username;
this.userinfo.city=option.usercity;
}
}
</script>
El evento Onload utiliza la serialización de opciones para recibir los valores de los parámetros variables enviados desde la página anterior, los imprime para ver si son correctos y luego los pasa a las variables de esta página< a i=1> 12:08:34.250 a123 en páginas/city/city.vue:16 12:08:34.260 beijing en páginas/city/city.vue:17< a i=3> Saltar resultados después de la finalización: (tanto el paso como la recepción de parámetros son exitosos) Un uso más complejo es que después de pasar, si la página de destino lo recibe, también puede pasar los parámetros a la página original, y la página original puede recibirla al mismo tiempo, esto es más complicado, El código de muestra es el siguiente: EventChannel se utiliza principalmente para transferir datos entre dos páginas.
// 在起始页面跳转到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)
})
}