Tipps zur Verwendung des Routings in Uniapp

Tipps für die Verwendung von Routing in Uniapp

1. Übersicht: Bei der Uniapp-Entwicklung ist Routing ein sehr wichtiger Aspekt, es kann zwischen Seiten springen und Parameter übergeben. In diesem Artikel werden die Verwendungsfähigkeiten des Routings in Uniapp vorgestellt und spezifische Codebeispiele gegeben.

In Uniapp kann die grundlegende Verwendung von Routing über uni.navigateTo, uni.redirectTo, uni.reLaunch, uni.switchTab und andere APIs erfolgen, um zur Seite zu springen. Die Verwendungsszenarien dieser APIs unterscheiden sich geringfügig und die spezifische Verwendung hängt von den Projektanforderungen ab.

1. uni.navigateTo: Wird verwendet, um eine neue Seite zu öffnen und die aktuelle Seite beizubehalten. Geeignet für normale Seitensprünge.

   Beispielcode:
   

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

   Nach dem Login kopieren

2. uni.redirectTo: Wird verwendet, um die aktuelle Seite zu schließen und eine neue Seite zu öffnen. Geeignet für Seitensprünge, die keine Rückkehr zur vorherigen Seite erfordern.

   Beispielcode:
   

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

   Nach dem Login kopieren

3. uni.reLaunch: Alle Seiten schließen und eine Seite innerhalb der Anwendung öffnen. Es eignet sich für Szenarien, in denen Sie den QR-Code scannen, um das Miniprogramm von anderen Plattformen aus aufzurufen.

   Beispielcode:
   

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

   Nach dem Login kopieren

4. uni.switchTab: Zur tarBar-Seite springen und alle anderen Nicht-tarBar-Seiten schließen. Geeignet zum Springen zwischen Seiten in der unteren Navigationsleiste.

   Beispielcode:
   

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

   Nach dem Login kopieren

In Uniapp können Daten zwischen Seiten über URL-Parameter übertragen werden.

1. Übergabe von Parametern zwischen Seiten

   Wenn Seite A zu Seite B springt, können Daten über URL-Parameter übergeben werden. Im Sprungcode von Seite A werden Parameter durch Spleißen von URLs übergeben:
   

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

   Nach dem Login kopieren

onLoad() {
    console.log(this.$route.query.id);
}

2. Parameter werden beim Öffnen der Seite übergeben gibt zurück

   In uniapp können Sie über die Methode uni.navigateBack zur vorherigen Seite zurückkehren und Parameter übergeben, indem Sie die Methode onBack der vorherigen Seite aufrufen. Der spezifische Code lautet wie folgt:
   Übergeben Sie auf Seite A beim Springen zu Seite B Parameter und registrieren Sie die onBack-Methode der vorherigen Seite:
   

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

   Nach dem Login kopieren

methods: {
    goBack() {
        uni.navigateBack({
            delta: 1,
            success: () => {
                uni.getOpenerEventChannel().emit(this.asr_notify);
            }
        });
    }
}

methods: {
    onBack(data) {
        console.log(data);
    }
}

Während des Entwicklungsprozesses müssen manchmal einige Vorgänge ausgeführt werden auf bestimmten Seiten Berechtigungskontrolle, um zu verhindern, dass nicht angemeldete Benutzer auf bestimmte Seiten zugreifen.

1. Erstellen Sie einen globalen Routing-Interceptor in der Datei main.js:

   // 全局路由拦截器
   router.beforeEach((to, from, next) => {
    const token = uni.getStorageSync('token');
    if (to.meta.requiresAuth && !token) { // 判断是否需要登录才能查看页面
        next('/pages/login/login');
    } else {
        next();
    }
   });

   Nach dem Login kopieren

2. Konfigurieren Sie Routing-Metainformationen auf der Seite, für die eine Berechtigungskontrolle erforderlich ist:

   export default {
    meta: {
        requiresAuth: true // 需要登录才能访问
    }
    // 省略其他代码...
   }

   Nach dem Login kopieren

Dieser Artikel stellt die grundlegende Verwendung von Routing in Uniapp, Parameterübergabemethoden, Routenabfangen und Berechtigungskontrolle vor. Durch sinnvollen Einsatz von Routing können Sprünge und Datenübertragungen zwischen Seiten erreicht werden, wodurch die Benutzererfahrung der Anwendung verbessert wird.

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung des Routings in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!