tutoriel d'installation du routeur vue

Vue est un framework de développement frontal populaire, et Vue Router fait partie de Vue utilisée pour gérer le routage dans les applications Vue. Vue Router vous permet de contrôler les URL du navigateur et le contenu affiché dans votre application. Il offre une expérience interactive riche et des capacités de navigation dans les pages pour les applications Vue. Dans cet article, nous expliquerons comment installer et utiliser Vue Router.

1. Créer un projet Vue

Tout d'abord, vous devez installer Vue CLI et créer un nouveau projet Vue. Entrez la commande suivante sur la ligne de commande :

npm install -g @vue/cli
vue create my-project

La commande ci-dessus installera Vue CLI et l'utilisera pour créer un projet Vue nommé "mon-projet". Allez dans votre nouveau projet et entrez la commande suivante dans la ligne de commande pour démarrer l'application :

cd my-project
npm run serve

2. Install Vue Router

Ensuite, nous besoin d'installer Vue Router. Entrez la commande suivante sur la ligne de commande pour installer Vue Router :

npm install vue-router --save

La commande ci-dessus installera Vue Router via npm et l'ajoutera aux dépendances de votre projet.

3. Création d'itinéraires

Ensuite, nous allons créer des composants de routage et de vue. Créez un fichier nommé "router.js" dans le répertoire SRC. Dans ce fichier, nous allons créer une nouvelle instance de Vue Router et l'exporter. Voici un exemple simple :

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

Le code ci-dessus crée une route nommée "home" qui pointe vers un composant nommé "Home". Pour utiliser Vue Router, vous devez importer la route dans le point d'entrée de votre application. Ouvrez le fichier "main.js" et ajoutez le code suivant :

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Le code ci-dessus active le routage en important le fichier "router.js" et en l'incluant dans l'instance racine de Vue.

4. Créer des composants de vue

Ensuite, nous devons créer des composants de vue pour afficher différents itinéraires. Créez un fichier nommé "Home.vue" dans le dossier "src/views". Dans ce fichier, ajoutez le code suivant :

<template>
  <div>
    <h1>Welcome to the Home Page!</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

Le code ci-dessus définit un simple composant "Accueil" qui n'a qu'un titre et aucune interaction ni navigation. Vous pouvez ajouter plus de composants et créer différents itinéraires pour eux.

5. Ajouter une navigation

Pour permettre aux utilisateurs de naviguer vers différents itinéraires et composants, nous devons ajouter quelques éléments de navigation à l'application. Ajoutez le code suivant dans le fichier « App.vue » :

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

Le code ci-dessus ajoute deux éléments de lien, l'un pointant vers la route « Accueil » et l'autre pointant vers la route « À propos ». Il contient également l'élément <router-view> qui affichera différents composants en fonction de l'URL actuelle.

6. Exécutez l'application

Vous pouvez désormais exécuter l'application pour voir si votre routage fonctionne correctement. Entrez la commande suivante sur la ligne de commande :

npm run serve

Cela lancera votre application dans le navigateur. Vous pouvez utiliser des éléments de navigation pour accéder à différents itinéraires et composants et voir comment l'URL reflète l'état actuel de la navigation.

Conclusion

Vue Router est un outil très utile qui peut vous aider à créer des applications Vue interactives avec une navigation complexe. Pour utiliser Vue Router, vous devez ajouter le composant à votre application et configurer le routage et la navigation. J'espère que cet article vous a été utile et je vous souhaite un bon développement de Vue !

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!