Conseils pour utiliser le routage dans Uniapp

Conseils pour utiliser le routage dans uniapp

1 Présentation
Dans le développement d'uniapp, le routage est un aspect très important, il peut sauter entre les pages et transmettre des paramètres. Cet article présentera les compétences d'utilisation du routage dans uniapp et donnera des exemples de code spécifiques.

2. Utilisation de base du routage uniapp
Dans uniapp, l'utilisation de base du routage peut être effectuée via uni.navigateTo, uni.redirectTo, uni.reLaunch, uni.switchTab et d'autres API pour accéder à la page. Les scénarios d'utilisation de ces API sont légèrement différents et l'utilisation spécifique dépend des exigences du projet.

1. uni.navigateTo : utilisé pour ouvrir une nouvelle page et conserver la page actuelle. Convient aux sauts de page ordinaires.
   Exemple de code :

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

2. uni.redirectTo : utilisé pour fermer la page actuelle et ouvrir une nouvelle page. Convient aux sauts de page qui ne nécessitent pas de revenir à la page précédente.
   Exemple de code :

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

3. uni.reLaunch : fermez toutes les pages et ouvrez une page de l'application. Il convient aux scénarios dans lesquels vous scannez le code QR pour accéder au mini-programme à partir d'autres plates-formes.
   Exemple de code :

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

4. uni.switchTab : accédez à la page tarBar et fermez toutes les autres pages non tarBar. Convient pour sauter entre les pages dans la barre de navigation inférieure.
   Exemple de code :

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

3. Transfert des paramètres de routage uniapp
Dans uniapp, les données peuvent être transférées entre les pages via les paramètres d'URL.

1. Passage de paramètres entre les pages
   Lorsque la page A passe à la page B, les données peuvent être transmises via les paramètres d'URL. Dans le code de saut de la page A, les paramètres sont passés en épissant les urls :

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

Dans la page B, les valeurs des paramètres peuvent être obtenues via uni.$route.query :

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

2. Les paramètres sont passés lorsque la page renvoie
   Dans uniapp, vous pouvez revenir à la page précédente via la méthode uni.navigateBack et transmettre des paramètres en appelant la méthode onBack de la page précédente. Le code spécifique est le suivant :
   Dans la page A, lorsque vous passez à la page B, transmettez les paramètres et enregistrez la méthode onBack de la page précédente :

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

Dans la page B, récupérez la valeur du paramètre et appelez-la au retour de la page La méthode onBack de la page précédente transmet les paramètres :

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

Dans la page A, enregistrez la méthode onBack et recevez les paramètres :

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

4. Interception de route Uniapp et contrôle des autorisations
Pendant le processus de développement, il est parfois nécessaire d'effectuer certaines opérations. sur certaines pages Contrôle des autorisations pour empêcher les utilisateurs non connectés d'accéder à certaines pages.

Dans uniapp, l'interception d'itinéraire et le contrôle des autorisations peuvent être mis en œuvre via des gardes de navigation. Le code spécifique est le suivant :

1. Créez un intercepteur de routage global dans le fichier main.js :

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

2. Configurez les méta-informations de routage sur la page qui nécessite un contrôle d'autorisation :

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

Grâce aux opérations ci-dessus, vous pouvez atteindre Les pages qui nécessitent une connexion pour accéder sont soumises à un contrôle d'autorisation. Les utilisateurs qui ne sont pas connectés seront interceptés et redirigés vers la page de connexion.

Résumé :
Cet article présente l'utilisation de base du routage dans uniapp, les méthodes de transmission de paramètres, l'interception de route et le contrôle des autorisations. Grâce à une utilisation raisonnable du routage, des sauts et des transferts de données entre les pages peuvent être réalisés, améliorant ainsi l'expérience utilisateur de l'application.

J'espère que cet article vous sera utile pour votre utilisation du routage uniapp.

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!