Maison >interface Web >Questions et réponses frontales >Comment modifier le contenu du fichier de routage dans le projet vue

Comment modifier le contenu du fichier de routage dans le projet vue

PHPz
PHPzoriginal
2023-04-26 14:18:48961parcourir

Dans le projet Vue, le fichier de routage est une partie très importante, il détermine la navigation et le saut du projet. Lorsque les exigences du projet changent, le contenu du fichier de routage peut devoir être modifié pour répondre aux nouvelles exigences. Cet article explique comment modifier le contenu du fichier de routage dans le projet Vue.

  1. Ouvrez le fichier de routage

Tout d'abord, recherchez le fichier de routage dans le projet. Dans un projet Vue, il s'agit généralement du fichier index.js dans le répertoire src/router. Ouvrez le fichier à l'aide de n'importe quel éditeur de texte.

  1. Comprendre la structure du fichier de routage

Avant d'ouvrir le fichier de routage, vous devez comprendre la structure du fichier de routage. Un fichier de routage de base contient généralement le contenu suivant :

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

Parmi eux, le routage Vue et Vue sont d'abord importés. Ensuite, deux objets de routage sont définis : Accueil et À propos. Chaque objet route contient le chemin, le nom et le nom du composant de la route. Enfin, exportez l'objet de routage en tant qu'objet de routage par défaut.

  1. Modifier les informations de routage

Après avoir compris la structure du fichier de routage, vous pouvez commencer à modifier les informations de routage. Par exemple, nous devons modifier le chemin À propos du routage dans le fichier de routage en « /info ».

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/info',
      name: 'About',
      component: About
    }
  ]
})
  1. Enregistrer et prendre effet

Après avoir modifié les informations de routage, vous devez enregistrer le fichier de routage et recompiler le projet pour que les modifications prennent effet. Entrez la commande suivante dans le terminal :

npm run serve

Une fois la compilation terminée, ouvrez la page du projet et vous pourrez voir que les informations de routage ont été mises à jour.

Résumé

Cet article explique comment modifier le contenu du fichier de routage dans le projet Vue. Vous devez d'abord ouvrir le fichier de routage et comprendre sa structure, puis apporter des modifications aux informations de routage, puis enregistrer et recompiler le projet pour que les modifications prennent effet. Dans le développement réel, des paramètres de routage plus complexes peuvent être définis en fonction des exigences du projet, et vous devez mieux maîtriser les connaissances et compétences liées au routage 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn