Detaillierte Erläuterung des Vue-Router-Routings und der Navigation zwischen Seiten

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.

vue-router

Wir wissen, dass Routing eine Reihe von Zugriffsadressenregeln definiert und die Routing-Engine die entsprechende Verarbeitungsseite basierend darauf findet Diese Regel stimmt überein und leitet die Anfrage dann zur Verarbeitung an die Seite weiter. Man kann sagen, dass dies bei jeder Back-End-Entwicklung der Fall ist, im Front-End-Routing gibt es jedoch keine „Anfrage“.

Front-End-Routing besteht darin, eine Komponente oder ein Objekt zu finden, deren Adresse übereinstimmt, und es darzustellen. Es gibt zwei Möglichkeiten, die Browseradresse zu ändern, ohne eine Anfrage an den Server zu senden. Die eine besteht darin, der Adresse ein # hinzuzufügen, um den Browser zu täuschen besteht darin, das HTML5-Fenster zu verwenden. Die Verlaufsfunktion verwendet den Hash der URL, um eine vollständige URL zu simulieren.

vue-router ist ein offizieller Satz dedizierter Routing-Tool-Bibliotheken und ein Plug-In für Vue. Wir müssen es über vue.use() in der globalen Referenz

Nachdem Sie vue-cli zum Erstellen des Projekts verwendet haben (vue-router bestätigt y während der Init-Initialisierung)

aus, um einen Strukturbaum zu generieren (gespeichert in list.txt):

Die Struktur ist wie folgt: tree -f > list.txt

src
├─assets // 静态资源
│ └─image // 图片
│  
├─components // 组件 
│ └─HelloWorld
│  HelloWorld.vue
│  
└─router // 路由配置
│ └─index.js
│ 
│ App.vue // 默认程序入口
│ main.js
│

Zeile 10 bindet die konfigurierte Route an die Vue-Instanz, Zeile 11 Verwendet die Render-Methode in der Vue-Instanz, um diese Vue-Komponente (App) zu zeichnen und die Initialisierung abzuschließen.

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router, 
 render: h => h(App)　
})

2. Dann registrieren wir mehrere Komponenten in Komponenten

3. Öffnen Sie router/index.js, um das Routing zu konfigurieren

import Vue from 'vue'
import Router from 'vue-router'
import Singer from '@/components/rank/rank'
Vue.use(Router) // 注册router
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Hello',
 component: MHeader // 路由中指定组件
 },
 {
 path: '/rank',
 name: 'rank',
 component: Rank
 }
 ]
})

Schlüsselwörter: „Modus“, „Verlaufsmodus“. ", „Hash Mode“, „Abstract Mode“

Wir können den Modus im erstellten Router verwenden, z. B. den Parameter . Dieser Wert bedeutet die Verwendung des

mode:historyDas Gegenteil ist: history

Dies ist der Unterschied zwischen Verlaufsmodus und Hash Modus, außer dass Darüber hinaus gibt es einen abstrakten Modus

• Zusammenfassung: Unterstützt alle JavaScript-Ausführungsumgebungen, wie z. B. Knotenserver. Wenn festgestellt wird, dass keine Browser-API vorhanden ist, wird das Routing in diesen Modus gezwungen

• Routing und Navigation
Schlüsselwörter: „Router-Link“, „Router-Ansicht“

vue-router bietet zwei Befehls-Tag-Komponenten, um diese Navigation und automatische Rendering-Logik zu handhaben:

 routers：[{
 name:'BookDetails',
 path:'books/:id',
 component:BookDetails 
 }]

 <router-link :to="{ name:&#39;BookDetails&#39;，params:{ id:1 } }">
  //...
 </router-link>

 export default {
 created () {
  const bookID = this.$router.params.id
 }
 }

routers:[
 { 
  name:'Main',
  path:'/',
  component:Main,
  children:[
  { name:'Home',path:'home',component:Home }
  { name:'Me',path:'me',component:Me }
  ] 
 },
 { name:'BookDetail',path:'/books/:id',component:BookDetail } 
]

 routes: [
 { path: '/a', redirect: '/b' }
 ]
// 重定向的目标也可以是一个命名的路由
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]

 routes: [
 { path: '/a', component: A, alias: '/b' }
 ]