A conexão e a diferença entre $ roteador e $ rota em vue

---

1. Conexão e diferença

1 、 $ roteador

$router É uma instância 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

Como verificar?

Imprima-o em qualquer componente this.$router, porque importamos o objeto roteador no arquivo main.js, e depois imprimimos o objeto roteador importado no arquivo main.js. Ambos são iguais.

2 、 $ rota

this.$route Aponte para o objeto de roteamento ativo no momento, você pode obter o caminho, nome, parâmetros, consulta e outros atributos do roteamento atual.

Um objeto de rota ( objeto de rota) mostra um estado das informações de roteamento atualmente ativas, inclui informações obtidas ao analisar a URL atual e a URL corresponde ao registro de rota (registros de rota).

Propriedades do objeto de rota:

• $ route.path : Tipo: string string, correspondendo ao caminho da rota atual, sempre analisado como um caminho absoluto, como "/ foo / bar".

• $ route.params : Type: Object, um objeto de chave / valor, incluindo fragmentos dinâmicos e fragmentos correspondentes completos.Se não houver parâmetros de roteamento, é um objeto vazio.

• $ route.query : Type: Object, um objeto de chave / valor, representando parâmetros de consulta de URL. Por exemplo, para o caminho / foo? User = 1, existe $ route.query.user == 1 e, se não houver parâmetro de consulta, é um objeto vazio.

• $ route.hash : Tipo: string, o valor hash da rota atual (com #), se não houver valor hash, é uma string vazia.

• $ route.fullPath : Tipo: string, URL após análise, incluindo parâmetros de consulta e o caminho completo do hash.

• $ route.name : o nome da rota atual, se houver. (Ver roteamento de nomes | Site oficial do Vue Router )

• $ route.redirectedFrom : Se houver um redirecionamento, é o nome da rota que originou o redirecionamento. (Veja redirecionamento e Alias ​​| Site oficial do Vue Router )

• $ route.matched : Type :, Array<RouteRecord>uma matriz contendo registros de roteamento de todos os fragmentos de caminho aninhados da rota atual. O registro de rota é uma cópia do objeto no array de configuração de rotas (e no array filho).

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

---

2. Por que todos os componentes podem usar $ router e $ route?

Porque todos os componentes são herdados da instância Vue, na Vue.prototypedefinição das propriedades $ router e $ route.

Imprima isso (a instância do componente atual) em qualquer componente, vamos dar uma olhada em sua cadeia de protótipo

Existe um pedaço de código no código-fonte do vue-router:

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

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

3. Informação

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

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

$ roteador detalhado | Site oficial do Vue Router

Objeto de roteamento | Site oficial do Vue Router