Heim > Artikel > Web-Frontend > Vue-Router2 implementiert eine Beispielerklärung zur Routing-Funktion

Vue-Router2 implementiert eine Beispielerklärung zur Routing-Funktion

小云云Original: 2018-05-18 15:41:581687Durchsuche

vue-router ist das offizielle Routing-Plug-in von Vue.js. Es ist tief in vue.js integriert und eignet sich zum Erstellen von Single-Page-Anwendungen. Die Single-Page-Anwendung von Vue basiert auf Routing und Komponenten. Routing wird zum Festlegen von Zugriffspfaden und zum Zuordnen von Pfaden und Komponenten verwendet. Herkömmliche Seitenanwendungen verwenden einige Hyperlinks, um Seitenwechsel und -sprünge zu erreichen. In der Vue-Router-Single-Page-Anwendung wird zwischen Pfaden gewechselt, dh zwischen Komponenten.

Hinweis: Vue-Router 2 gilt nur für die Vue2.x-Version. Im Folgenden wird erläutert, wie Sie Vue-Router 2 verwenden, um die Routing-Funktion basierend auf Vue2.0 zu implementieren.

Es wird empfohlen, für die Installation npm zu verwenden.

npm install vue-router

1. Routing verwenden

In main.js müssen Sie die Routing-Funktion explizit installieren:

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

1. Definieren Sie die verwendeten Komponenten hier aus anderen Dateien importieren

import index from './components/index.vue'
import hello from './components/hello.vue'

2. Definieren Sie Routen

const routes = [
 { path: '/index', component: index },
 { path: '/hello', component: hello },
]

3. Erstellen Sie eine Router-Instanz und übergeben Sie dann die Routenkonfiguration

const router = new VueRouter({
 routes
})

4. Erstellen und mounten Sie das Root-Beispiel. Fügen Sie Routen über Router-Konfigurationsparameter ein, sodass die gesamte Anwendung über Routing-Funktionen verfügt

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

Nach der obigen Konfiguration werden die mit der Route übereinstimmenden Komponenten in der

Dann sollte es in App.vue so geschrieben werden:

<template>
 <p id="app">
  <router-view></router-view>
 </p>
</template>

index.html sollte so geschrieben werden:

<body>
 <p id="app"></p>
</body>

Dadurch wird die gerenderte Seite mit der ID der App im p gemountet.

2. Weiterleitung

const routes = [
 { path: '/', redirect: '/index'},  // 这样进/ 就会跳转到/index
 { path: '/index', component: index }
]

3. Verschachteltes Routing

const routes = [
 { path: '/index', component: index,
  children: [
   { path: 'info', component: info}
  ]
  }
]

Auf die Info-Komponente kann über /index/info zugegriffen werden

4 . Lazy Loading

const routes = [
 { path: '/index', component: resolve => require(['./index.vue'], resolve) },
 { path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]

Durch Lazy Loading werden nicht alle Komponenten auf einmal geladen, sondern erst, wenn Sie auf diese Komponente zugreifen. Bei Anwendungen mit vielen Komponenten wird die Erstladegeschwindigkeit verbessert.

Verwenden Sie in Vue-Router 1

Verwenden Sie in Vue-Router 2 Ersetzen Sie das a-Tag in Version 1

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home" rel="external nofollow" >Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="&#39;home&#39;">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="&#39;home&#39;">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: &#39;home&#39; }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: &#39;user&#39;, params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: &#39;register&#39;, query: { plan: &#39;private&#39; }}">Register</router-link>

6. Routing-Informationsobjekt

1.$route.path

Zeichenfolge, Der Pfad, der dem aktuellen entspricht Route wird immer als absoluter Pfad aufgelöst, z. B. „/foo/bar“.

2.$route.params

Ein Schlüssel-/Wertobjekt, einschließlich dynamischer Fragmente und vollständig übereinstimmender Fragmente. Wenn keine Routing-Parameter vorhanden sind, handelt es sich um ein leeres Objekt.

3.$route.query

Ein Schlüssel/Wert-Objekt, das URL-Abfrageparameter darstellt. Zum Beispiel für den Pfad /foo?user=1, $route.query.user == 1 oder ein leeres Objekt, wenn keine Abfrageparameter vorhanden sind.

4.$route.hash

Der Hashwert der aktuellen Route (ohne #), wenn kein Hashwert vorhanden ist, handelt es sich um eine leere Zeichenfolge.

5.$route.fullPath

Die URL nach Abschluss der Analyse, einschließlich des vollständigen Pfads der Abfrageparameter und des Hashs.

6.$route.matched

Ein Array, das die Routing-Datensätze aller verschachtelten Pfadfragmente der aktuellen Route enthält. Routendatensätze sind Kopien von Objekten im Routenkonfigurationsarray (und im untergeordneten Array).

Basierend auf dem oben Gesagten sieht eine main.js einschließlich Umleitung, verschachteltem Routing und Lazy Loading wie folgt aus:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
 routes:[
 { path: '/', redirect: '/index' },
 { path: '/index', component: resolve => require(['./components/index.vue'], resolve),
  children:[
   { path: 'info', component: resolve => require(['./components/info.vue'], resolve) }
  ]
 },
 { path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) },
 ]
})
const app = new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

Verwandte Empfehlungen:

Detaillierte Beispiele für URL- und Routing-Funktionen von thinkphp5

Benutzerdefinierte Methode von Node.js zur Implementierung der Datei-Routing-Funktion

Detaillierte Beispiele für die Implementierung von Routing durch NodeJS Funktionen

Das obige ist der detaillierte Inhalt vonVue-Router2 implementiert eine Beispielerklärung zur Routing-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erklärung der Implementierung eines coolen Menü-Plug-Ins in VueNächster Artikel：Detaillierte Erklärung der Implementierung eines coolen Menü-Plug-Ins in Vue

In Verbindung stehende Artikel

Mehr sehen