Tutoriel d'introduction au développement VUE3 : utilisation du routage frontal Vue.js

Vue.js est actuellement l'un des frameworks JavaScript les plus populaires. Il est utilisé dans divers projets front-end en raison de sa simplicité, de sa facilité d'utilisation, de son efficacité et de sa rapidité. Surtout après la sortie de la version VUE3, ses principes et sa conception sont devenus plus clairs, et ses performances ont également été grandement améliorées. Si vous recherchez un moyen rapide et facile de développer un site Web ou une application frontale moderne, alors Vue.js vaut la peine d'être appris et maîtrisé. Cet article présentera un didacticiel d'introduction au développement de VUE3, en se concentrant sur la façon d'utiliser le routage frontal de Vue.js.

Quel est le rôle du routage front-end de Vue.js ?

Dans une application monopage, le changement de page est réalisé via le routage frontal. Le routage frontal signifie que dans les applications Web, l'adresse URL reste inchangée et le contenu de la page est modifié via JavaScript pour obtenir un chargement asynchrone et aucune commutation d'actualisation. Il associe différentes URL à différents composants ou modèles de page, formant un système de routage frontal complet. Dans Vue.js, nous pouvons implémenter la fonction de routage frontal via le plug-in vue-router.

Introduction à vue-router

vue-router est un plug-in de routage officiellement fourni par Vue.js, qui est utilisé pour implémenter la fonction de routage frontal des applications monopage. Il est étroitement intégré à Vue.js, ce qui facilite le développement d'applications monopage à l'aide de Vue.js. Il offre une variété de modes de routage et prend en charge des fonctions riches telles que le routage dynamique, le routage imbriqué, le routage nommé, etc. Et vue-router prend également en charge le chargement paresseux des routes, ce qui améliore les performances des applications.

Installer vue-router

Avant de commencer à utiliser vue-router, vous devez d'abord installer le plug-in vue-router. Vous pouvez l'installer via la commande npm :

npm install vue-router

Définir le routeur de Vue.js

Avant d'utiliser vue-router, vous devez définir le routeur. Le routeur est l'un des composants principaux de vue-router. Il est responsable du routage et de la correspondance de toutes les requêtes URL et du rendu des composants correspondants dans la zone spécifiée.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  routes
})

export default router

Dans le code ci-dessus, nous introduisons d'abord Vue et VueRouter, et installons VueRouter dans Vue via la méthode Vue.use(). Ensuite, deux règles de routage sont définies, correspondant respectivement à la page d'accueil et à la page à propos. Ces règles sont définies via les attributs chemin, nom et composant. Enfin, nous transmettons ces règles à une nouvelle instance de VueRouter et exportons l'objet routeur.

Utilisation du routage frontal Vue.js

Après avoir défini le routeur, nous devons l'utiliser dans le composant vue. Les composants Vue peuvent être utilisés pour restituer différentes zones de la page. Nous pouvons utiliser la vue de routeur de composants intégrée de Vue.js pour afficher les composants correspondants.

<template>
  <div class="wrapper">
    <h1>{{ msg }}</h1>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: 'Welcome to my VUE3 Web App!'
    }
  }
}
</script>

router-link est un composant intégré de Vue.js, utilisé pour générer des liens et associer des liens aux routeurs. Lorsque l'utilisateur clique sur un lien, Router restitue automatiquement le composant Vue qui correspond au lien.

Résumé

Cet article présente le didacticiel d'introduction au développement de VUE3, en se concentrant sur la façon d'utiliser le routage frontal de Vue.js. Vue.js est un excellent framework JavaScript particulièrement adapté au développement d'applications monopage et mobiles. Le module de routage vue-router de Vue.js possède de nombreuses excellentes fonctions qui peuvent nous aider à développer des fonctions de routage très facilement. J'espère que l'introduction de cet article pourra aider les débutants à mieux maîtriser la fonction de routage de Vue.js.

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!