Vue2.0 Vue-Router-Nutzung und Vorsichtsmaßnahmen

Vue-Router ist die von Vue.js offiziell empfohlene Routing-Management-Bibliothek, die in der Version 2.0 von Vue.js vollständig aktualisiert und optimiert wurde, wodurch sie einfacher zu verwenden und effizienter ist. Vue-Router ist sehr bequem zu verwenden, es gibt jedoch einige Probleme, die bei der Verwendung beachtet werden müssen. In diesem Artikel werden die Verwendung und Vorsichtsmaßnahmen von Vue-Router vorgestellt, um Entwicklern dabei zu helfen, Vue-Router besser zu nutzen.

1. Grundlegende Verwendung von Vue-Router

Vue-Router ist ein auf Vue.js basierendes Plug-in, das vor der Verwendung installiert und eingeführt werden muss. Sie können npm verwenden, um Vue-Router direkt zu installieren:

npm install vue-router

Nach Abschluss der Installation führen Sie Vue-Router in der Vue-Anwendung ein:

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

Vue.use(VueRouter) registriert eine globale Router-Instanz.

Konfigurieren Sie den Router in der Vue-Instanz:

import Home from './views/Home.vue'
import About from './views/About.vue'

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

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

VueRouter ist im Wesentlichen ein Vue-Instanzobjekt, das zur Verwaltung des Vue-Routings verwendet wird. Im obigen Code haben wir eine VueRouter-Instanz erstellt und ein Routing-Konfigurationsarray (Routen) übergeben. Das Routing-Konfigurationsarray enthält Komponenten, die verschiedenen Routen der Anwendung entsprechen.

Router-Link und Router-Ansicht in der Vorlage hinzufügen:

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

In VueRouter müssen Sie die Router-Link-Komponente verwenden, wenn Sie Routen überspringen, und Sie müssen die Router-View-Komponente verwenden, um die aktuelle Routing-Komponente anzuzeigen.

2. Dynamisches Routing und verschachteltes Routing

Vue-Router unterstützt dynamisches Routing und verschachteltes Routing, das je nach Bedarf konfiguriert werden kann.

1. Dynamisches Routing

Dynamisches Routing bezieht sich auf Routing-Matching basierend auf Variablen beim Routing, zum Beispiel:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

In diesem Beispiel stellt /:id einen Matching-Parameter dar, der mit /user/1, /user /2 übereinstimmen kann und andere unterschiedliche Routen und übergeben die Parameter an die passende Komponente.

2. Verschachteltes Routing

Verschachteltes Routing bezieht sich auf das Einbetten einer anderen Route in eine Route, zum Beispiel:

const router = new VueRouter({
  routes: [
    { path: '/user', component: User,
      children: [
        { path: '', component: UserHome },
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

In diesem Beispiel verwenden Sie die Option „Kinder“, um eine verschachtelte Routing-Struktur, die Definition von Unterrouten und die Definition von zu definieren Die übergeordnete Route ist ähnlich, der Pfad der untergeordneten Route muss jedoch nach dem Pfad der übergeordneten Route hinzugefügt werden.

3. Routing-Hook-Funktionen

Vue-Router bietet einige Routing-Hook-Funktionen, die beim Routing von Sprüngen einige Vorgänge ausführen können.

1.beforeEach

Hook-Funktion, die vor dem Routensprung ausgeführt wird und zur Berechtigungskontrolle und zum Abfangen von Sprüngen usw. verwendet werden kann.

router.beforeEach((to, from, next) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
  // 如果需要跳转，必须调用next()。
  next()
})

2.afterEach

Die nach dem Routensprung ausgeführte Hook-Funktion kann für Operationen nach dem Routensprung verwendet werden.

router.afterEach((to, from) => {
  // to和from都是路由对象，to是即将跳转的路由对象，from是当前路由对象。
})

4. Hinweise

1 Sie müssen beim Routing die Router-Link-Komponente verwenden.

2. Wenn Sie beim Routing Parameter übergeben müssen, können Sie Routing-Parameter oder Abfrageparameter verwenden. Der dem Routing-Parameter entsprechende Variablenname muss in der Routing-Definition mit einem Doppelpunkt (:) definiert werden.

3. Beim Springen können Sie im Metaattribut des Routenobjekts einige Metadaten festlegen, die in der Routing-Hook-Funktion verwendet werden können.

4. Wenn Sie den HTML5-Verlaufsmodus verwenden, müssen Sie das Routing auf der Serverseite konfigurieren und anpassen. Wenn nicht konfiguriert, wird beim Aktualisieren eine 404-Fehlerseite zurückgegeben.

5. Zusammenfassung

Vue-Router ist ein wichtiges Plug-in für Vue.js, das das Routing von Vue.js-Anwendungen einfach verwalten und steuern kann. In diesem Artikel werden die grundlegende Verwendung und Vorsichtsmaßnahmen von Vue-Router vorgestellt. Ich hoffe, dass die Leser die Verwendung und Anwendung von Vue-Router besser beherrschen können.

Das obige ist der detaillierte Inhalt vonVue2.0 Vue-Router-Nutzung und Vorsichtsmaßnahmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!