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

   Copier après la connexion

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)

   Copier après la connexion

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 })

   Copier après la connexion

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')

   Copier après la connexion

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

   Copier après la connexion

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 :

Le contenu d'About.vue est le suivant :

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!