Comment configurer le routage Uniapp

Avec la popularité et la demande croissantes d'applications mobiles, de plus en plus de développeurs commencent à utiliser la technologie de développement multiplateforme pour créer des applications. UniApp, en tant que framework de développement multiplateforme, a progressivement émergé dans le cadre de cette tendance et est bien accueilli par de plus en plus de développeurs. Le routage est un composant très important lors du développement d'applications avec UniApp, qui permet de naviguer entre différentes pages.

Dans UniApp, le routage est utilisé pour contrôler les sauts de page et la navigation de l'application. Si vous connaissez déjà le mécanisme de routage de Vue.js, vous vous sentirez très familier lorsque vous utiliserez le routage d'UniApp. Le mécanisme de routage d'UniApp est bien compatible avec le routage Vue.js et fournit des fonctions et API supplémentaires.

Pour les débutants, l'application du routage UniApp peut ne pas être claire au début, alors où devez-vous remplir le routage UniApp ? Dans le prochain article, nous présenterons en détail l'application du routage UniApp et où le remplir.

1. Fichier de configuration de routage

Dans UniApp, vous pouvez configurer le routage dans le fichier de configuration de routage. Le fichier de configuration de routage se trouve généralement dans le fichier pages.json dans le répertoire racine, et sa fonction est de configurer la table de mappage de routage de l'application. Dans le fichier de configuration de routage, vous devez spécifier le chemin de chaque page, le titre de la page, l'icône de la page et d'autres attributs. Si vous devez ajouter la page à la barre de navigation, vous devez également spécifier le tabBar<.> attribut. Voici un exemple de fichier de configuration de routage simple : <code>pages.json 文件中，其作用是配置应用程序的路由映射表。在路由配置文件中，你需要指定每个页面的路径、页面的标题、页面的icon等属性，如果你需要添加页面到导航栏中，还需要指定tabBar属性。下面是一个简单的路由配置文件示例：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们",
        "navigationBarBackgroundColor": "#ffffff"
      },
      "tabBar": {
        "text": "关于",
        "iconPath": "../../static/images/tabbar/about.png",
        "selectedIconPath": "../../static/images/tabbar/about-active.png"
      }
    }
  ],
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#35b4b4",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "../../static/images/tabbar/home.png",
        "selectedIconPath": "../../static/images/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "../../static/images/tabbar/about.png",
        "selectedIconPath": "../../static/images/tabbar/about-active.png"
      }
    ]
  }
}

上面的代码中，我们定义了两个页面：index和about，并且在about页面中添加了一个tabBar属性，来指定页面在导航栏中的位置和样式。同时，我们也定义了应用程序的导航栏样式。在这个示例中，我们把index页面作为导航栏的首页，因此在tabBar属性中将其设置为了默认页面。

2. 使用UniApp路由API

除了在路由配置文件中进行路由配置之外，UniApp还提供了一整套路由API，可以在业务逻辑中灵活地使用。这些API包括uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab以及uni.navigateBack等。

• uni.navigateTo

从当前页面跳转到应用程序的某个页面。如果目标页面还未打开，该API会新开一个页面；如果目标页面已经打开，该API会将目标页面置于栈顶。

uni.navigateTo({
  url: '/pages/about/about'
});

• uni.redirectTo

关闭当前页面，跳转到应用程序的某个页面。该API关闭当前页面，因此无法通过返回按钮返回到当前页面。

uni.redirectTo({
  url: '/pages/about/about'
});

• uni.reLaunch

关闭所有的页面，打开应用程序的某个页面。

uni.reLaunch({
  url: '/pages/about/about'
});

• uni.switchTab

跳转到应用程序的某个tab页面，该API只能用于跳转到应用程序的tab

uni.switchTab({
  url: '/pages/index/index'
});

Dans le code ci-dessus, nous définissons deux pages : index et about, et dans abouttabBar est ajouté à la page /code> pour spécifier la position et le style de la page dans la barre de navigation. Parallèlement, nous définissons également le style de la barre de navigation de l'application. Dans cet exemple, nous utilisons la page index comme page d'accueil de la barre de navigation, nous la définissons donc comme page par défaut dans l'attribut tabBar.

2. Utiliser l'API de routage UniApp

En plus de la configuration du routage dans le fichier de configuration du routage, UniApp fournit également un ensemble complet d'API de routage qui peuvent être utilisées de manière flexible dans la logique métier. Ces API incluent uni.navigateTo, uni.redirectTo, uni.reLaunch, uni.switchTab et uni.navigateBacketc.

3. uni.navigateTo

Passez de la page actuelle à une certaine page de l'application. Si la page cible n'a pas été ouverte, l'API ouvrira une nouvelle page ; si la page cible est déjà ouverte, l'API placera la page cible en haut de la pile.

uni.navigateBack({
  delta: 1  // 返回的页面数，如果为空，则返回上一个页面
});

🎜🎜uni.redirectTo🎜🎜🎜Fermez la page actuelle et accédez à une certaine page de l'application. Cette API ferme la page actuelle, il n'y a donc aucun moyen de revenir à la page actuelle via le bouton Précédent. 🎜rrreee🎜🎜uni.reLaunch🎜🎜🎜Fermez toutes les pages et ouvrez une certaine page de l'application. 🎜rrreee🎜🎜uni.switchTab🎜🎜🎜 Accédez à une certaine page onglet de l'application. Cette API ne peut être utilisée que pour accéder à la page onglet de l'application. 🎜rrreee🎜🎜uni.navigateBack🎜🎜🎜Fermez la page actuelle et revenez à la page précédente. 🎜rrreee🎜🎜Résumé🎜🎜🎜Dans UniApp, le routage est une partie importante du saut d'application et de la navigation. Lors du développement d'applications, vous pouvez configurer et utiliser le routage via des fichiers de configuration de routage et des API de routage. Le fichier de configuration de routage peut bien contrôler la position et le style de la page, tandis que l'API de routage fournit une méthode de programmation flexible, vous permettant de sauter et de parcourir les pages de manière flexible dans la logique métier. Apprendre à utiliser le mécanisme de routage UniApp peut apporter une grande commodité et efficacité à votre développement. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!