Die Verbindung und der Unterschied zwischen $ router und $ route in vue

Artikelverzeichnis

1. Verbindung und Unterschied

1 、 $ Router

$router Ist eine VueRouter-Instanz

import Vue from 'vue'
import VueRouter from 'vue-router'

const User = () => import('../components/User')

//1.通过Vue.use(插件)安装插件，会去执行插件的install方法
Vue.use(Router)

const routes = [
  {
    
    
    path:'/user',
    component:User
  }
]

//2.创建路由对象，$router就是这里创建的对象
const router = new VueRouter({
    
    
  routes
});

//3.导出
export default router

Wie überprüfe ich?

Drucken Sie es in einer beliebigen Komponente this.$router, da wir das Router-Objekt in die Datei main.js importiert haben, und drucken Sie dann das importierte Router-Objekt in die Datei main.js. Beide sind gleich.
Fügen Sie hier eine Bildbeschreibung ein

2 、 $ Route

this.$route Zeigen Sie auf das aktuell aktive Routing-Objekt. Sie können den Pfad, den Namen, die Parameter, die Abfrage und andere Attribute des aktuellen Routings abrufen.

Ein Routenobjekt (Routenobjekt) zeigt einen Status der aktuell aktiven Routing-Informationen an, enthält Informationen, die durch Parsen der aktuellen URL erhalten wurden, und die URL stimmt mit dem Routendatensatz (Routendatensätzen) überein.

Eigenschaften des Routenobjekts:

$ route.path : Typ: Zeichenfolge Zeichenfolge, die dem Pfad der aktuellen Route entspricht und immer als absoluter Pfad analysiert wird, z. B. "/ foo / bar".
$ route.params : Typ: Objekt, 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.
$ route.query : Typ: Object, ein Schlüssel- / Wertobjekt, das URL-Abfrageparameter darstellt. Für den Pfad / foo? User = 1 gibt es beispielsweise $ route.query.user == 1, und wenn kein Abfrageparameter vorhanden ist, handelt es sich um ein leeres Objekt.
$ route.hash : Typ: Zeichenfolge, der Hashwert der aktuellen Route (mit #). Wenn kein Hashwert vorhanden ist, handelt es sich um eine leere Zeichenfolge.
$ route.fullPath : Typ: Zeichenfolge, URL nach dem Parsen, einschließlich Abfrageparameter und des vollständigen Hash-Pfads.
$ route.name : Der Name der aktuellen Route, falls vorhanden. (Siehe Benennung von Routing | Vue Router offizielle Website )
$ route.redirectedFrom : Wenn eine Umleitung vorhanden ist, ist dies der Name der Route, von der die Umleitung stammt. (Siehe Umleitung und offizielle Website von Alias | Vue Router )
$ route.matched : Typ:, Array<RouteRecord>ein Array, das Routing-Datensätze aller verschachtelten Pfadfragmente der aktuellen Route enthält. Der Routendatensatz ist eine Kopie des Objekts im Routenkonfigurationsarray (und im untergeordneten Array).

const router = new VueRouter({
    
    
  routes: [
    // 下面的对象就是路由记录
    {
    
    
      path: '/foo',
      component: Foo,
      children: [
        // 这也是个路由记录
        {
    
     path: 'bar', component: Bar }
      ]
    }
  ]
})

Fügen Sie hier eine Bildbeschreibung ein

2. Warum können alle Komponenten $ router und $ route verwenden?

Da alle Komponenten von der Vue-Instanz geerbt werden, werden in Vue.prototypeder Definition der Eigenschaften $ router und $ route zwei Eigenschaften angegeben.

Drucken Sie diese (die aktuelle Komponenteninstanz) in einer beliebigen Komponente aus. Schauen wir uns die Prototypenkette an

Fügen Sie hier eine Bildbeschreibung ein
Der Quellcode von vue-router enthält einen solchen Code:

Object.defineProperty(Vue.prototype, '$router', {
    
    
	get () {
    
     return this._routerRoot._router }
})

Object.defineProperty(Vue.prototype, '$route', {
    
    
  	get () {
    
     return this._routerRoot._route }
})

3. Informationen

https://github.com/vuejs/vue-router/tree/v3.4.9

https://www.bilibili.com/video/BV15741177Eh?p=114

$ router detailliert | Vue Router offizielle Website

Routing-Objekt | Vue Router offizielle Website