Was sind die grundlegenden Konfigurationsbefehle des Vue-Routers?

Vues Router ist ein Plug-in für Seitensprung und Routing-Management. Es kann uns helfen, verschiedene Komponenten entsprechend unterschiedlicher URL-Anforderungen zu laden und Front-End-Routing-Funktionen zu implementieren. Wenn Sie den Router von Vue verwenden, müssen Sie eine Grundkonfiguration durchführen. Im Folgenden werden die grundlegenden Konfigurationsbefehle des Vue-Routers ausführlich vorgestellt und spezifische Codebeispiele angehängt.

1. Vue Router installieren
   Verwenden Sie npm, um Vue Router zu installieren, öffnen Sie das Terminal und führen Sie den folgenden Befehl im Projektverzeichnis aus:

   npm install vue-router

2. Vue Router importieren
   Vue Router in die Datei main.js importieren und die Vue verwenden .use-Methode Registrieren Sie es als Plug-In für Vue:

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

3. Erstellen Sie eine Routing-Instanz
   Erstellen Sie eine Routing-Instanz in der main.js-Datei und konfigurieren Sie Routing-Regeln:

   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. Mounten Sie die Routing-Instanz
   Im main.js-Datei, hinzufügen Die Routing-Instanz wird auf der Vue-Instanz gemountet:

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

5. Konfigurieren des Routing-Ausgangs
   Verwenden Sie in der Stammkomponente von Vue das Tag , um die der Route entsprechende Komponente anzuzeigen :

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

Durch die obige Konfiguration ist die Grundkonfiguration des Vue-Routers abgeschlossen. Hier ist ein vollständiges Beispiel:

Erstellen Sie zunächst zwei Komponenten, Home.vue und About.vue, im Verzeichnis src/components.

Der Inhalt von Home.vue lautet wie folgt:

<template>
  <div>
    <h2 id="Welcome-to-Home-Page">Welcome to Home Page</h2>
  </div>
</template>

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

Der Inhalt von About.vue lautet wie folgt:

<template>
  <div>
    <h2 id="Welcome-to-About-Page">Welcome to About Page</h2>
  </div>
</template>

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

Dann erstellen Sie die Datei index.js im Verzeichnis src/router mit dem folgenden Inhalt:

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

Schließlich im src/main.js-Datei Konfigurieren Sie wie folgt:

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

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

Das Obige sind die grundlegenden Konfigurationsbefehle und Codebeispiele von Vue Router. Durch diese Konfigurationen können wir Sprünge zwischen Seiten und Front-End-Routing-Funktionen implementieren. Ich hoffe, dieser Artikel kann Ihnen helfen, Vue Router zu verstehen und zu verwenden.

Das obige ist der detaillierte Inhalt vonWas sind die grundlegenden Konfigurationsbefehle des Vue-Routers?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!