Compétences en développement Vue3+TS+Vite : Comment utiliser Vue Router pour la gestion du routage

Compétences en développement Vue3+TS+Vite : Comment utiliser Vue Router pour la gestion du routage

Ces dernières années, le framework Vue est devenu de plus en plus populaire parmi les développeurs dans le domaine du développement front-end. Dans l'écosystème Vue, Vue Router, en tant qu'outil moderne de gestion du routage, peut nous aider à créer des applications d'une seule page avec une bonne expérience utilisateur. Cet article partagera les compétences de développement liées à l'utilisation de Vue Router avec Vue3 et TypeScript pour la gestion du routage.

1. Installez et initialisez Vue Router

Tout d'abord, nous devons installer Vue Router à l'aide de la commande npm ou Yarn. Ouvrez le terminal et exécutez la commande suivante :

npm install vue-router@next

Ensuite, dans le fichier d'entrée (main.ts ou main.js) du projet Vue3, nous devons introduire le Vue Router et l'associer à l'application Vue. L'exemple de code est le suivant :

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
  // 其他路由配置
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp(App)
  .use(router)
  .mount('#app')

Dans l'exemple de code ci-dessus, nous avons d'abord créé une instance de Vue Router via la fonction createRouter et configuré le mode d'historique de routage et la table de routage. Ensuite, une instance d'application Vue est créée via la fonction createApp et l'instance Vue Router créée est enregistrée dans l'application Vue via la méthode use.

2. Définir les routes et les composants

Dans l'étape précédente, nous avons configuré une table de routage de base. Dans cet exemple, nous avons uniquement ajouté une route nommée Home et défini son composant correspondant sur le composant Home. Ensuite, nous devons créer ce composant.

Dans le répertoire src/views, créez un fichier nommé Home.vue et modifiez le contenu du fichier comme suit :

<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: "Home"
})
</script>

<style scoped>
</style>

Dans cet exemple de code, nous utilisons la nouvelle fonctionnalité de Vue - l'API de composition. Définissez un composant via la fonction définirComponent et exportez ce composant. Dans ce composant, nous restituons simplement un élément div contenant le titre « Accueil ».

3. Navigation et saut d'itinéraire

Sur la base des deux premières étapes, nous avons créé avec succès une application Vue Router de base. Ensuite, nous présenterons quelques méthodes et techniques connexes pour les sauts de navigation et de routage fournis par Vue Router.

1. Utilisez le composant pour la navigation

Vue Router fournit un composant pratique Dans le modèle, il suffit d'utiliser et de définir l'attribut to pour spécifier le chemin de routage qui doit être sauté.

L'exemple de code est le suivant :

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

Dans cet exemple, nous avons ajouté un composant au composant Accueil Lorsque vous cliquez sur ce composant, il passe au chemin "/about".

2. Utilisez la méthode router.push() pour la navigation par programmation

En plus d'utiliser le composant dans le modèle pour la navigation, Vue Router fournit également une méthode de navigation par programmation. Nous pouvons utiliser la méthode router.push() dans le script du composant pour effectuer des sauts de routage.

L'exemple de code est le suivant :

import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: "Home",
  methods: {
    goToAbout() {
      const router = useRouter()
      router.push('/about')
    }
  }
})

Dans cet exemple, nous définissons une méthode goToAbout, utilisons la fonction useRouter à l'intérieur de la méthode pour obtenir l'instance actuelle de Vue Router et effectuons des sauts de routage via router.push('/about' ).

4. Routage dynamique et paramètres de routage

Vue Router prend également en charge les paramètres de routage et de routage dynamiques. En configurant des espaces réservés dans le chemin de routage, nous pouvons créer un chemin de routage contenant des paramètres dynamiques et obtenir les valeurs des paramètres de routage via l'objet $route.params.

L'exemple de code est le suivant :

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
  // 其他路由配置
]

const User = defineComponent({
  name: "User",
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  created() {
    console.log(this.id) // 输出路由参数id的值
  }
})

Dans l'exemple ci-dessus, nous définissons un chemin de routage /user/:id qui contient des paramètres dynamiques, et recevons et vérifions les valeurs des paramètres de routage via l'attribut props. Dans la fonction hook de cycle de vie créée du composant User, nous pouvons afficher la valeur de l'identifiant du paramètre de routage via console.log(this.id).

5. Route guard

Dans les projets réels, nous devons souvent effectuer un traitement logique supplémentaire avant les sauts de routage, tels que la vérification de la connexion de l'utilisateur, le contrôle des autorisations de page, etc. Vue Router fournit des gardes de route pour répondre à ces besoins.

Les trois gardes de routage couramment utilisés de Vue Router sont beforeEach, beforeEnter et beforeLeave. Ils sont déclenchés avant de sauter un itinéraire, avant d'entrer dans un certain itinéraire et avant de quitter un certain itinéraire.

L'exemple de code est le suivant :

router.beforeEach((to, from, next) => {
  // 逻辑处理
  next()
})

router.beforeEnter((to, from, next) => {
  // 逻辑处理
  next()
})

router.beforeLeave((to, from, next) => {
  // 逻辑处理
  next()
})

Dans l'exemple ci-dessus, nous enregistrons le garde de routage global via la méthode correspondante de l'objet routeur et effectuons un traitement logique supplémentaire dans la fonction de rappel. Après avoir traité la logique, continuez le saut de routage en appelant la méthode next().

6. Résumé

Vue Router est une partie importante de l'écosystème Vue, et son application dans l'environnement de développement Vue3+TS+Vite est devenue plus simple et plus flexible. Cet article partage quelques conseils clés sur la façon d'utiliser Vue Router pour la gestion des itinéraires, notamment l'installation et l'initialisation de Vue Router, la définition d'itinéraires et de composants, la navigation et les sauts d'itinéraire, les itinéraires dynamiques et les paramètres d'itinéraire, ainsi que les gardes d'itinéraire.

En maîtrisant ces compétences, nous pouvons mieux utiliser Vue Router pour créer des applications d'une seule page avec une bonne expérience utilisateur et jouer un rôle plus important dans le développement front-end. J'espère que cet article pourra fournir de l'aide et des conseils aux lecteurs sur l'utilisation de Vue Router pour la gestion du routage dans le projet Vue3+TS+Vite.

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!