Que dois-je faire si les chemins de saut dans le composant uniapp sont différents ?

Avec le développement rapide de l'Internet mobile, le développement d'applications mobiles est progressivement devenu l'un des domaines prioritaires des développeurs. Relativement parlant, les applications d'aujourd'hui doivent non seulement être belles et fluides, mais également offrir une meilleure expérience utilisateur. Par conséquent, les développeurs consacrent également plus de temps aux détails tels que les couleurs, les animations et les styles d'interface, et aiment utiliser le routage imbriqué pour la gestion et les appels.

Lorsque j'utilisais Uniapp pour développer des applications mobiles récemment, j'ai rencontré un problème avec différents chemins de saut dans un composant. J'espère partager la solution avec vous ici.

Description du problème

J'utilise le composant uni-list dans uniapp pour afficher plusieurs contenus dans la liste. Lorsque je clique sur un certain contenu, je dois accéder à la page de détails spécifique. Vous pouvez passer par navigateTo. La logique de saut est la suivante : uni-list 组件，在列表中展示了多个内容，在点击某个内容时需要进入到具体的详情页面。可以通过 navigateTo 进行跳转，跳转逻辑如下：

uni.navigateTo({
  url: '/pages/detail/detail?id=' + id
});

其中 detail 页面是在 pages 文件夹下已经创建了的。

但是当我通过这种方式跳转时，发现无论在哪个列表页面，跳转后的 detail 页面所在的 url 路径都是 /pages/detail/detail?id=。这样的话，在使用 uni.showModal 返回上一页时，无法正确返回到之前的列表页面。

原因分析

经过分析，这是由于我在 App.vue 文件夹中使用了 uni-simple-router 进行路由管理，需要对它进行设置。具体是在 config 文件夹下的 router.js 中进行设置。在这里，同样需要使用 navigateTo 进行跳转，但需要注意的是，它的路径设置方法和普通的路径设置是不同的。

解决方法

可通过以下两种方法来解决这个问题：

1. 直接使用 uni.navigateTo

这种方式相比较而言较为简单，只需要在 list 组件中添加 bindtap 或 @click 事件：

<uni-list-item
  title="跳转详情页"
  arrow
  @click="redirectToDetail(item.id)">
</uni-list-item>

然后在 methods 中添加跳转逻辑：

methods: {
  redirectToDetail(id) {
    uni.navigateTo({
      url: '/pages/detail/detail?id=' + id
    });
  }
}

这样，在每个页面中都会调用 redirectToDetail 方法，跳转到具体的页面。

2. 使用 uni-simple-router

使用这种方式的前提是我们已经在 App.vue 中使用了 uni-simple-router 进行路由管理，并已经在 config 中配置好了 routes。

在 list 组件的 methods 中，需要添加如下方法：

methods: {
  redirectToDetail(id) {
    uni.$router.push({
      path: '/pages/detail/detail?id=' + id
    });
  }
}

这里调用了 $router.push 方法，path 属性中需要填写完整的路径，包括文件夹名称、文件名和参数。通过这种方式跳转后，每个页面的路径都会不同，可以正确返回上一页。

---

总之，无论是直接使用 uni.navigateTo 还是使用 uni-simple-routerrrreee

La page detail a été créée dans le dossier pages. 🎜🎜Mais quand je saute de cette façon, je constate que quelle que soit la page de liste sur laquelle je me trouve, le chemin de l'URL de la page detail après le saut est /pages/detail/detail ? identifiant =. Dans ce cas, lors de l'utilisation de uni.showModal pour revenir à la page précédente, la page de liste précédente ne peut pas être renvoyée correctement. 🎜🎜Analyse des causes🎜🎜Après analyse, c'est parce que j'utilise uni-simple-router dans le dossier App.vue pour la gestion du routage et que je dois le configurer. Plus précisément, les paramètres sont définis dans router.js sous le dossier config. Ici, vous devez également utiliser navigateTo pour sauter, mais il convient de noter que sa méthode de définition de chemin est différente de la configuration de chemin ordinaire. 🎜🎜Solution🎜🎜Vous pouvez résoudre ce problème grâce aux deux méthodes suivantes :🎜

1. Utilisez directement uni.navigateTo

🎜Cette méthode est relativement simple, ajoutez simplement le bindtap ou @click dans le composant list : 🎜rrreee🎜Puis ajoutez le saut dans les méthodes Logique de transfert : 🎜rrreee 🎜De cette façon, la méthode redirectToDetail sera appelée dans chaque page pour accéder à la page spécifique. 🎜

2. Utilisez uni-simple-router

🎜La condition préalable pour utiliser cette méthode est que nous avons déjà utilisé dans <code>App.vue uni-simple-router effectue la gestion du routage et a configuré les routes dans config. 🎜🎜Dans les methods du composant list, vous devez ajouter la méthode suivante : 🎜rrreee🎜La méthode $router.push est appelée ici, dans l'attribut path, le chemin complet doit être renseigné, y compris le nom du dossier, le nom du fichier et les paramètres. Après avoir sauté de cette manière, le chemin de chaque page sera différent et vous pourrez revenir correctement à la page précédente. 🎜

---

🎜En bref, que vous utilisiez uni.navigateTo directement ou que vous utilisiez uni-simple-router, vous devez faire attention à la façon dont le chemin est défini lorsque sauter, de sorte que Pour sauter correctement à la page qui doit être affichée et revenir à la page précédente. L'analyse et la résolution des problèmes peuvent également mieux aider les développeurs à comprendre l'utilisation et la configuration du routage. 🎜

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!