uni-app utilise le routage de navigation et les sauts de page

a Semblable aux balises en HTML ,

1. Naviguer vers le saut de page

1.Description de l'attribut

Nom d'attribut	taper	valeur par défaut	illustrer	Avis	Différences de plateforme
URL	Chaîne		Accédez à l'application, la valeur est un chemin absolu ou un chemin relatif, tel que : '…/login/login' ou '/pages/login/login'	Vous ne pouvez pas ajouter .vuede suffixe, sinon le saut ne réussira pas.
Type ouvert	Chaîne	naviguer	Méthode de saut
delta	Nombre	1	Valable lorsque le type d'ouverture est « navigateBack », indiquant le nombre de couches à restaurer
classe de vol stationnaire	Chaîne	survol du navigateur	Spécifiez la classe de style lorsque vous cliquez dessus. Il n'y aura aucun effet de clic lorsque hover-class="none" est défini.

2. valeurs valides de type ouvert (couramment utilisées)

valeur	illustrer	illustrer	Différences de plateforme expliquées
naviguer	Correspondant à la fonction de uni.navigateTo	Aller à la page
réorienter	Fonction correspondante de uni.redirectTo	Ouvrir sur la page actuelle
switchTab	Correspond à la fonction de uni.switchTab	Aller à la page à onglet
relancer	Correspondant à la fonction d'uni.reLaunch		Les mini-programmes ByteDance et Feishu ne sont pas pris en charge
naviguerRetour	Correspond à la fonction de uni.navigateBack

3. À propos de la limite de longueur de l'URL (solution : communication de page , 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.注意:

• Page de saut tabbar, doit être définieopen-type="switchTab"

• navigator-hoverPar défaut {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator> la couleur d'arrière-plan des nœuds enfants doit être transparente.

• navigator-open-typeSi l'attribut utilise la valeur correspondante, la fonction de la valeur correspondante 高于correspondra 跳转路径.

• app-nvue La plateforme n'est supportée que par des projets nvue purs ( render为native) <navigator>. Si le rendu n'est pas natif, nvue ne prend pas en charge le composant navigateur, veuillez utiliser APIjump.

• Pour quitter l'application sous app, vous pouvez utiliser plus.runtime.quit sur la plateforme Android. iOS n'a aucune idée de quitter une application.

• uLinknavigator组件Oui , le composant est 增强版souligné dans le style. Fonctionnellement, il prend en charge l'ouverture de pages Web en ligne, les schémas d'autres applications, l'envoi d'e-mails via mailto et les appels via tél.

• En raison de la nécessité de SSR dans le projet Vue3, l'extrémité H5 imbriquera la balise a dans la couche externe.

2. Saut d'itinéraire (saut programmatique)

1.navigateTo

Conservez la page actuelle, accédez à une page de l'application et utilisez-la uni.navigateBackpour revenir à la page d'origine.
urlLes paramètres transmis onLoadsont reçus pendant le cycle de vie

//在起始页面跳转到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. Redirection vers une nouvelle page (redirectTo)

Fermez la page actuelle et accédez à une page de l'application.

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

3. Accédez à la page tabBar (switchTab)

注意:

navigateTo, redirectToSeules 非 tabBar les pages peuvent être ouvertes.
switchTab Seules tabBarles pages peuvent être ouvertes.
reLaunch La page peut être ouverte 任意.
Le bas de la page tabBarest déterminé par la page, c'est-à-dire que tant qu'il est défini comme tabBarune page, il sera en bas tabBar. Les sauts de page
ne peuvent pas être effectués dans . Ensuite, la pile de pages disparaîtra et vous ne pourrez pas y revenir pour le moment. Si vous devez revenir, vous pouvez utiliser la navigation vers d'autres enregistrements d'historique du navigateur. App.vue
H5端页面刷新navigateBackhistory.back()