Développement d'entrée VUE3 : utiliser Vue-Router pour réaliser un saut de page

Vue 3 est l'un des frameworks JavaScript les plus populaires pour créer des interfaces utilisateur interactives. Vue-Router est un plug-in pour le framework Vue, utilisé pour implémenter la gestion du routage dans les applications monopage. Dans cet article, nous présenterons comment utiliser Vue-Router pour implémenter des sauts de page dans Vue 3.

1. Installez et configurez Vue-Router

Avant de commencer, assurez-vous que Vue 3 est installé. S'il n'a pas encore été installé, vous pouvez vous référer à la documentation officielle pour l'installer : https://v3.cn.vuejs.org/guide/installation.html.

Installer Vue-Router :

Dans le terminal, exécutez la commande suivante pour installer :

npm install vue-router@4.0.0-alpha.13

Dans Vue 3, la version de Vue- Le routeur ne doit pas être inférieur à 4.0.0-alpha.13.

Après avoir installé Vue-Router, nous devons configurer Vue-Router dans l'application Vue 3. Créez un fichier routes.js :

import Home from '@/components/Home'
import About from '@/components/About'

export default [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

Dans ce fichier, nous définissons deux routes, l'une est la page d'accueil (Accueil) et l'autre est la page à propos de nous (À propos).

Il faut également importer Vue-Router dans le fichier d'entrée (main.js) de l'application Vue 3 et le configurer :

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

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

const app = createApp(App)

app.use(router)

app.mount('#app')

Dans ce fichier, on passe createRouter La fonction crée une instance de routeur et utilise la fonction createWebHistory pour créer le schéma du routeur. Nous transmettons également des routes à l'instance de routeur.

Dans Vue 3, nous utilisons la méthode app.use() pour installer le plugin Vue-Router dans l'application Vue. Enfin, placez la méthode app.mount() après la méthode app.use(). Cela garantit que Vue-Router a été correctement installé et que l'application peut fonctionner normalement.

2. Implémenter le saut de page

Maintenant que nous avons installé et configuré avec succès Vue-Router, nous allons utiliser Vue-Router pour implémenter le saut de page.

1. Ajouter un lien de routage dans le fichier App.vue :

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

Dans ce modèle, nous utilisons le composant pour créer un lien de routage et spécifier l'attribut to comme chemin de routage.

2. Ajouter du contenu dans Home.vue et About.vue

Nous avons créé deux composants Vue pour les pages Accueil et À propos, nous avons besoin d'ajouter du contenu aux modèles de ces composants pour vérifier si la page saute normalement.

Home.vue:

<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the home page</p>
  </div>
</template>

About.vue:

<template>
  <div>
    <h2>About</h2>
    <p>Welcome to the about page</p>
  </div>
</template>

Maintenant, nous avons configuré avec succès le lien de routage et le contenu de la page. Nous pouvons utiliser ces liens pour accéder aux pages.

3. Résumé

Dans cet article, nous avons appris à utiliser Vue-Router pour implémenter des sauts de page dans Vue 3. Tout d'abord, nous installons et configurons Vue-Router. Ensuite, nous créons le lien de route à l'aide du composant Enfin, nous ajoutons du contenu au modèle de composant pour vérifier si la page saute correctement.

Vue-Router possède de nombreuses autres fonctionnalités, telles que le routage dynamique, le routage imbriqué, les gardes de route, et bien plus encore. En maîtrisant ces fonctionnalités, vous pouvez créer des applications complexes d'une seule page et utiliser des sauts et la navigation au sein de vos applications.

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!