Para vue interno, se é o componente raiz ou sub-montagem, não é este $ router e esta rota $ duas propriedades, a diferença entre eles como se segue:
$ VueRouter exemplo, aponta para o router de corrente, isto é novo vue ({router: roteador}) onde recebidas propriedades de objecto da instância router e métodos podem ser usados exemplos VueRouter listados na secção anterior,
$ pontos de rota para a rota atual objeto saltos, um objeto contém o atual informações de roteamento, <Router-View /> componentes terão de ser adquiridos pelos componentes de atributos de renderização
Por US $ roteador, que contém os seguintes atributos
- caminho; a rota atual da King Road, Road King sempre resolver para o absoluto, por exemplo: / foo / bar
- o params; tipo de objecto, e um fragmento contendo a dinâmica completa segmentos correspondentes, se não houver nenhum parâmetro rota é um objecto nulo
- Consulta; tipo de objeto, parâmetro de consulta URL indica, para / foo / user = 1 é, $ route.query.user é igual a 1, se há parâmetros de consulta, em seguida, o objeto está vazio
- valor hash na rota atual (com #), se o valor hash não é a string vazia; haxixe
- fullPath; URL após a conclusão da análise, contida consulta parâmetros e mistura completa de Road King
- Combinado; um array, todo o registro aninhado rota Road King contendo o segmento de rota atual, ou seja, todos os objetos pai são encaminhadas dentro do array, <router-view /> componentes usará esta propriedade
- nome; a rota atual do nome e nome de alias relacionado
- Redirectedfrom; nome de roteamento de origem de redirecionamento, e apelidos e redirecionamentos relacionados.
- meta; meta 值
nome, Meta dois valores é criar vuerouter, cada router para o encaminhamento de ficha de entrada correspondente ao nome de atributo e mata atributo , geralmente depois de algum outro tratamento
escritor por: Desert QQ: 22969969
Para castanha:
< Div id = "app" > < router-link para = "/ login" >登陆</ router-link > < router-link para = "/ info / 15" >详情页</ router-link > < hr / > < router-view > </ router-view > </ div > < roteiro > const de login = {template: ' ! <div> Página de login </ div> '} Const Informações ={Template: ' <div> id: {{presente $ route.params.id}} </ div>. ' } Rotas const = [ {caminho: ' / login ' , componente: login, name: ' logon ' }, {caminho: ' / info /: id ' , componente: informação, name: ' informações ' }, ] const app = new Vue ({ el: ' #app ' , router:nova VueRouter ({rotas}) }) </ roteiro >
Render, como segue:
Nós clique sobre a rota de destino para a página de login, digite o console aplicativo $ route, em seguida, clique na página de detalhes, em seguida, entrar no console app $ route, imprimir, respectivamente, como segue:
página de login: 
Informações página:
$ Route frequentemente utilizado quando o objeto é na guarda de navegação, o parâmetro para 2 é o objeto $ route.
Quando a instalação é executada VueRouter instalá-lo, o método é o seguinte:
Object.defineProperty (Vue.prototype, '$ router', { // Vue实例的$ router指向了this._routerRoot._router
get: função get () { retornar este ._routerRoot._router}
});
Object.defineProperty (Vue.prototype, '$ route', { // 设置$ route为este $ root._route.
Get: função get () { retornar este ._routerRoot._route}
});
Ao executar Object.defineProperty, visitamos isso dentro de Vue. $ Router e este. $ Route foram apontando this._routerRoot._router e this._routeRoot._route, e esses dois atributos são incorporados ao VueRouter no momento da instalação Vue beforeCreate implementado dentro da função do ciclo de vida, como segue:
beforeCreate: função beforeCreate () { SE (ISDEF ( a este $ options.router).) { // Se este existem $ options.router, isto é, passada ao criar um objecto roteador exemplo vue. a esta ._routerRoot = a esta ; // no exemplo vue adicionar um ponto _routerRoot a si próprios, isto é, vue exemplo a este ._router = a esta $ options.router ;. // add exemplo vue-router é configurado de um ponto sobre a vue _router exemplo a este ._router.init ( a este ); // VUE-Router chamadas exemplo init () inicia os parâmetros de vue exemplo Vue.util.defineReactive ( a este , '_route', a esta._router.history.current); // por defineReactive Vue _router colocar em responsivo, igual this._router.history.current } else { a este ._routerRoot = ( a este . $ && pai o presente $ parent._routerRoot). || a esta ; } registerInstance ( a este , a este ); },
this._router.history.current igual atributo de instância VueRouter .history.current, o método será executado no protótipo História updateRoute após cada salto roteamento, redefine atributos atuais, criar uma rota objetos neste método é o seguinte:
função createRoute (Record, LOCATION, Redirectedfrom, Router) { // criar um registro de rota objeto: as informações de roteamento local de gravação: necessidade de saltar de roteamento endereço (incluindo o caminho, consulta, haxixe e params objeto) redirectedForm: roteador desconhecido: Vue- router casos var stringifyQuery $$ = router 1 &&. router.options.stringifyQuery; var consulta location.query || = {}; // redefinir a consulta, se o conjunto não é objeto vazio é redefinido para o try { consulta = clone (consulta); } a captura (E) {} var rota = { // adicionar uma rota objetos Nome: location.name || (Record && record.name), // informações de nome Meta: (Record && record.meta) || {}, // Meta informações caminho: || location.path '/' , o hash: o location.hash || '', // roteamento Road king consulta: Query, // rota o hash params: location.params || {}, // rota do params fullPath: GetFullPath (. LOCALIZAÇÃO, stringifyQuery $$ 1), / / completo king Road Matched: registro formatMatch (registro) :? [] // registro do registro atual para gravar todos nós ancestral do pai até que o nó }; IF (Redirectedfrom) { route.redirectedFrom = GetFullPath (. Redirectedfrom, stringifyQuery $$ 1 ); } return Objeto .Freeze (rota) // Finalmente, a rota para congelar objetos e retorno (que não permite novas propriedades) }