Explication détaillée de la fonction de routage dans Vue3 : application pour implémenter le saut de routage de l'application SPA

Avec le développement continu de la technologie front-end, l'application à page unique (SPA) est devenue le courant dominant du développement front-end et le routage fait partie intégrante des applications SPA. Dans Vue3, la fonction de routage a été mise à jour et améliorée, la rendant plus facile à utiliser et plus puissante. Cet article présentera en détail l'application des fonctions de routage dans Vue3 et comment implémenter des sauts de routage dans les applications SPA.

1. Fonction de routage dans Vue3

Les sauts d'itinéraire dans Vue3 sont tous effectués via des fonctions de routage. Cette fonction est appelée "Fonction de navigation d'itinéraire". Son utilisation de base est la suivante :

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

router.push('/home')

Le saut d'itinéraire peut être réalisé en appelant le routeur. Fonction .push() pour spécifier le chemin à parcourir. Parmi eux, la fonction createRouter() est utilisée pour créer un routeur, le paramètre history spécifie le mode de routage et le paramètre routes définit la relation de mappage entre les chemins de routage et les composants.

2. Implémenter des gardes d'itinéraire

Dans le développement réel, nous devons parfois limiter et contrôler les sauts d'itinéraire. A ce moment, nous pouvons utiliser le garde de route (Route Guard) fourni dans Vue3. Un garde-route est une fonction appelée lorsqu'un itinéraire est sur le point de sauter. Nous pouvons juger et traiter dans cette fonction pour contrôler le routage. Vue3 fournit les fonctions de garde d'itinéraire suivantes :

2.1 beforeEach

Cette fonction sera appelée avant chaque saut d'itinéraire. Renvoyer true signifie continuer le saut, et renvoyer false signifie annuler le saut. Nous pouvons effectuer une vérification de connexion, un jugement d'autorisation et d'autres opérations dans cette fonction.

router.beforeEach((to, from, next) => {
  // to: 即将要跳转的路由
  // from: 当前页面正要离开的路由
  // next: 控制路由是否可以跳转的函数

  const loggedIn = localStorage.getItem('user')

  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    next('/login')
  } else {
    next()
  }
})

2.2 beforeRouteEnter

Cette fonction ne peut être utilisée qu'à l'intérieur du composant. Cette fonction est appelée lorsque le composant n'a pas encore été créé. Nous pouvons obtenir l'instance du composant dans cette fonction et l'exploiter après l'avoir obtenue.

export default {
  beforeRouteEnter(to, from, next) {
    axios.get('/user').then(response => {
      if (response.data.isAdmin) {
        next()
      } else {
        next('/403')
      }
    })
  }
}

2.3 beforeRouteUpdate

Cette fonction est appelée après les sauts d'itinéraire mais le composant actuel est toujours réutilisé. Nous pouvons mettre à jour les données du composant dans cette fonction.

export default {
  beforeRouteUpdate(to, from, next) {
    const id = to.params.id
    axios.get(`/user/${id}`).then(response => {
      this.user = response.data
      next()
    })
  }
}

3. Implémenter un routage dynamique

Parfois, nous devons générer dynamiquement des chemins de routage lors de sauts de routage. Vue3 fournit la fonction "Dynamic Route". Le routage dynamique est implémenté en ajoutant des espaces réservés au chemin de routage. Les espaces réservés commencent par : :.

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

Dans l'exemple ci-dessus, nous avons réalisé une génération dynamique de chemins de routage via l'espace réservé ":id". Lorsque le routage saute, nous pouvons obtenir la valeur id dans le chemin via to.params.id.

router.push({ path: `/user/${userId}` })

4. Implémenter un routage imbriqué

Pour les pages complexes, nous devons parfois implémenter un routage imbriqué. Vue3 prend également en charge le routage imbriqué. Nous pouvons implémenter un routage imbriqué en définissant des sous-routes dans les routes et sous-routes parents.

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'list',
          component: List
        },
        {
          path: 'detail/:id',
          component: Detail
        }
      ]
    }
  ]
})

Dans l'exemple ci-dessus, nous avons défini deux sous-itinéraires, list et detail, dans l'itinéraire d'accueil. Dans le composant List, nous pouvons obtenir des informations sur la sous-route via l'attribut children de l'objet $route.

export default {
  created() {
    console.log(this.$route.children) // [ { path: 'list', ... }, { path: 'detail/:id', ... } ]
  }
}

5. Résumé

Dans Vue3, la fonction de routage est l'une des clés de la mise en œuvre des applications SPA. Grâce aux fonctions de routage, nous pouvons implémenter des sauts de routage, des gardes de routage, un routage dynamique, un routage imbriqué et d'autres fonctions. Pour les développeurs, maîtriser l’utilisation des fonctions de routage est une étape très importante, et c’est aussi le seul moyen d’améliorer les capacités de développement front-end.

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!