La conexión y la diferencia entre $ router y $ route en vue

---

1. Conexión y diferencia

1 、 $ enrutador

$router Es una instancia de VueRouter

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

¿Cómo verificar?

Imprima en cualquier componente this.$router, porque importamos el objeto del enrutador en el archivo main.js y luego imprimimos el objeto del enrutador importado en el archivo main.js. Ambos son iguales.

2 、 $ ruta

this.$route Apunte al objeto de enrutamiento activo actualmente, puede obtener la ruta, el nombre, los parámetros, la consulta y otros atributos del enrutamiento actual.

Un objeto de ruta ( objeto de ruta) muestra un estado de la información de enrutamiento actualmente activa, incluye información obtenida al analizar la URL actual y la URL coincide con el registro de ruta (registros de ruta).

Propiedades del objeto de ruta:

• $ route.path : Tipo: cadena cadena, correspondiente a la ruta de la ruta actual, siempre analizada como una ruta absoluta, como "/ foo / bar".

• $ route.params : Tipo: Objeto, un objeto clave / valor, que incluye fragmentos dinámicos y fragmentos coincidentes completos. Si no hay parámetros de enrutamiento, es un objeto vacío.

• $ route.query : Type: Object, un objeto de clave / valor, que representa los parámetros de consulta de URL. Por ejemplo, para la ruta / foo? User = 1, hay $ route.query.user == 1, y si no hay un parámetro de consulta, es un objeto vacío.

• $ route.hash : Tipo: cadena, el valor hash de la ruta actual (con #), si no hay valor hash, es una cadena vacía.

• $ route.fullPath : Tipo: cadena, URL después del análisis, incluidos los parámetros de consulta y la ruta completa del hash.

• $ route.name : el nombre de la ruta actual, si existe. (Ver asignación de nombres | sitio web oficial de Vue Router )

• $ route.redirectedFrom : si hay una redirección, es el nombre de la ruta desde la que se originó la redirección. (Ver redirección y alias | sitio web oficial de Vue Router )

• $ route.matched : Type :, Array<RouteRecord>una matriz que contiene registros de enrutamiento de todos los fragmentos de ruta anidados de la ruta actual. El registro de ruta es una copia del objeto en la matriz de configuración de rutas (y en la matriz de niños).

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

---

2. ¿Por qué todos los componentes pueden usar $ router y $ route?

Debido a que todos los componentes se heredan de la instancia de Vue, en Vue.prototypela definición de las propiedades $ router y $ route dos.

Imprima esto (la instancia actual del componente) en cualquier componente, echemos un vistazo a su cadena de prototipos

Hay un fragmento de código en el código fuente de vue-router:

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

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

3. Información

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

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

$ enrutador detallado | sitio web oficial de Vue Router

Objeto de enrutamiento | sitio web oficial de Vue Router