Quelles sont les commandes de configuration de base du routeur Vue ?

Vue's Router est un plug-in pour la gestion des sauts de page et du routage. Cela peut nous aider à charger différents composants en fonction de différentes requêtes d'URL et à implémenter des fonctions de routage front-end. Lorsque vous utilisez le routeur de Vue, vous devez y effectuer une configuration de base. Ce qui suit présentera en détail les commandes de configuration de base du routeur de Vue et joindra des exemples de code spécifiques.

1. Installer Vue Router
   Utilisez npm pour installer Vue Router, ouvrez le terminal et exécutez la commande suivante dans le répertoire du projet :

   npm install vue-router

2. Import Vue Router
   Importez Vue Router dans le fichier main.js et utilisez Vue. .use enregistrez-le en tant que plug-in pour Vue :

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)

3. Créez une instance de routage
   Créez une instance de routage dans le fichier main.js et configurez les règles de routage :

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Home from './components/Home.vue'
   import About from './components/About.vue'
   
   Vue.use(VueRouter)
   
   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About }
   ]
   
   const router = new VueRouter({
     mode: 'history', // 使用HTML5的history模式，去除URL中的"#"
     routes
   })

4. Montez l'instance de routage
   Dans le main.js, ajoutez L'instance de routage est montée sur l'instance de Vue :

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

5. Configuration de la sortie de routage
   Dans le composant racine de Vue, utilisez la balise :

   <template>
     <div>
    <router-view></router-view>
     </div>
   </template>

Grâce à la configuration ci-dessus, nous complétons la configuration de base du routeur de Vue. Voici un exemple complet :

Tout d'abord, créez deux composants, Home.vue et About.vue, dans le répertoire src/components.

Le contenu de Home.vue est le suivant :

<template>
  <div>
    <h2>Welcome to Home Page</h2>
  </div>
</template>

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

Le contenu d'About.vue est le suivant :

<template>
  <div>
    <h2>Welcome to About Page</h2>
  </div>
</template>

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

Ensuite, créez un fichier index.js dans le répertoire src/router avec le contenu suivant :

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

Enfin, dans le Fichier src/main.js Configurez comme suit :

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

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

Ce qui précède sont les commandes de configuration de base et des exemples de code de Vue Router. Grâce à ces configurations, nous pouvons implémenter des sauts entre les pages et des fonctions de routage front-end. J'espère que cet article pourra vous aider à comprendre et à utiliser Vue Router.

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!