Was soll ich tun, wenn die Sprungpfade in der Uniapp-Komponente unterschiedlich sind?

Mit der rasanten Entwicklung des mobilen Internets ist die Entwicklung mobiler Anwendungen nach und nach zu einem der vorrangigen Bereiche für Entwickler geworden. Relativ gesehen müssen heutige Anwendungen nicht nur schön und reibungslos sein, sondern auch eine bessere Benutzererfahrung bieten. Daher verbringen Entwickler auch mehr Zeit mit Details wie Farben, Animationen und Schnittstellenstilen und verwenden gerne verschachteltes Routing für Verwaltung und Aufruf.

Als ich kürzlich uniapp zur Entwicklung mobiler Anwendungen verwendet habe, bin ich auf ein Problem mit unterschiedlichen Sprungpfaden in einer Komponente gestoßen. Ich hoffe, die Lösung hier mit Ihnen zu teilen.

Problembeschreibung

Ich verwende die uni-list-Komponente in uniapp, um mehrere Inhalte in der Liste anzuzeigen. Wenn ich auf einen bestimmten Inhalt klicke, muss ich die spezifische Detailseite aufrufen. Sie können durch navigateTo springen. Die Sprunglogik lautet wie folgt: 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

Die Seite detail wurde im Ordner pages erstellt. 🎜🎜Aber wenn ich auf diese Weise springe, stelle ich fest, dass der URL-Pfad der detail-Seite nach dem Sprung unabhängig von der Listenseite, auf der ich mich befinde, /pages/detail/detail? id =. Wenn Sie in diesem Fall uni.showModal verwenden, um zur vorherigen Seite zurückzukehren, kann die vorherige Listenseite nicht korrekt zurückgegeben werden. 🎜🎜Ursachenanalyse🎜🎜Nach der Analyse liegt das daran, dass ich uni-simple-router im Ordner App.vue für die Routing-Verwaltung verwende und es einrichten muss. Konkret werden die Einstellungen in router.js im Ordner config vorgenommen. Hier müssen Sie zum Springen auch navigateTo verwenden. Beachten Sie jedoch, dass sich die Pfadeinstellungsmethode von der normalen Pfadeinstellung unterscheidet. 🎜🎜Lösung🎜🎜Sie können dieses Problem mit den folgenden zwei Methoden lösen:🎜

1. Verwenden Sie direkt uni.navigateTo

🎜Diese Methode ist relativ einfach. Fügen Sie einfach den bindtap- oder @click-Ereignis in der list-Komponente: 🎜rrreee🎜Dann fügen Sie den Sprung in methods Übertragungslogik hinzu: 🎜rrreee 🎜Auf diese Weise wird die Methode redirectToDetail auf jeder Seite aufgerufen, um zu einer bestimmten Seite zu springen. 🎜

2. Verwenden Sie uni-simple-router

🎜Voraussetzung für die Verwendung dieser Methode ist, dass wir bereits in <code>App.vue verwendet haben uni-simple-router führt die Routing-Verwaltung durch und hat Routen in config konfiguriert. 🎜🎜In den Methoden der list-Komponente müssen Sie die folgende Methode hinzufügen: 🎜rrreee🎜Die Methode $router.push wird aufgerufen Hier muss im Pfadattribut der vollständige Pfad ausgefüllt werden, einschließlich Ordnername, Dateiname und Parameter. Nachdem Sie auf diese Weise gesprungen sind, ist der Pfad jeder Seite unterschiedlich und Sie können korrekt zur vorherigen Seite zurückkehren. 🎜

---

🎜Kurz gesagt: Unabhängig davon, ob Sie uni.navigateTo direkt oder uni-simple-router verwenden, müssen Sie darauf achten, wie der Pfad wann festgelegt wird Springen, damit Um korrekt zu der Seite zu springen, die angezeigt werden muss, und zur vorherigen Seite zurückzukehren. Die Analyse und Lösung von Problemen kann Entwicklern auch dabei helfen, die Verwendung und Konfiguration von Routing besser zu verstehen. 🎜

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn die Sprungpfade in der Uniapp-Komponente unterschiedlich sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!