suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementieren Sie mehrere Routing-Implementierungen in Vue-Router2.X

Implementieren Sie mehrere Routing-Implementierungen in Vue-Router2.X

亚连
亚连Original
2018-06-06 16:03:131558Durchsuche

Jetzt werde ich Ihnen eine Zusammenfassung der verschiedenen Routing-Implementierungsmethoden von Vue-Router2.X geben. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

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 Komponente, hier verwenden wir den Import aus anderen Dateien 

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

Definieren Sie die Route 

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

3 eine Router-Instanz und dann Routenkonfiguration übergeben 

const router = new VueRouter({
 routes
})

4. Erstellen und mounten Sie die Root-Instanz. 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 3b98d3dcbd970ff4cc00075cd76585a9

Dann sollte App.vue so schreiben: 

<template>
 <p id="app">
  <router-view></router-view>
 </p>
</template>
index.html里呢要这样写：
<body>
 <p id="app"></p>
</body>

Dadurch wird die Seite gerendert auf dem p mit der ID von app gemountet.

2. Weiterleitung

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

3. Verschachteltes Routing

const routes = [
 { path: &#39;/index&#39;, component: index,
  children: [
   { path: &#39;info&#39;, component: info}
  ]
  }
]

Sie können über /index/info auf die Info-Komponente zugreifen

4. Lazy Loading

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

Durch Lazy Loading ist das nicht möglich Komponenten werden auf einmal geladen, und nur diese Komponente wird geladen, wenn Sie auf diese Komponente zugreifen. Bei Anwendungen mit vielen Komponenten wird die Erstladegeschwindigkeit verbessert.

5. b988a8fd72e5e0e42afffd18f951b277

In Vue-Router 2, b988a8fd72e5e0e42afffd18f951b277

<!-- 字符串 -->
<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

Die Zeichenfolge, die dem Pfad der aktuellen Route entspricht, wird immer in einen absoluten 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(&#39;#app&#39;)

Das Obige ist Was ich zusammengestellt habe, hoffe ich, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie integriere ich Vue in ein JQuery/Bootstrap-Projekt?

Klicken Sie auf die Seitenzahl, um den Seiteninhalt beim Paging in vue.js zu ändern

So implementieren Sie Wertübertragung und Kommunikation in vue2.0 Komponenten

Das obige ist der detaillierte Inhalt vonImplementieren Sie mehrere Routing-Implementierungen in Vue-Router2.X. 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：Projektentwicklung reagierenNächster Artikel：Projektentwicklung reagieren

In Verbindung stehende Artikel

Mehr sehen