Vue-router analiza el código fuente (D). La diferencia de $ ruta y este router vue $ dentro de este

Para Vue interna, si es el componente raíz o sub-montaje, no es este $ router y este $ route dos propiedades, la diferencia entre ellos como sigue:

$ VueRouter instancia puntos al router actual, es decir, nuevo Vue ({enrutador: enrutador}) donde entrantes propiedades y métodos de objeto de instancia enrutador pueden ser ejemplos VueRouter utilizados se enumeran en la sección anterior,

$ puntos de ruta a la ruta actual objeto salta, un objeto contiene la información de enrutamiento actual, <Router-View /> componentes tendrá que ser adquirido por los componentes de atributos de renderizado

Por $ router, que contiene los siguientes atributos

• camino, la ruta actual de la Road King, Rey del camino siempre se resuelve a lo absoluto; por ejemplo: / foo / bar
• la params; tipo de objeto, y un fragmento que contiene la dinámica completa búsqueda de segmentos, si no hay un parámetro de ruta es un objeto nulo
• Consulta; tipo de objeto, parámetro de consulta URL indica, para / foo / user = 1 es, $ route.query.user es igual a 1, si no hay parámetros de consulta, entonces el objeto está vacía
• valor hash en la ruta actual (con #), si el valor hash no es la cadena vacía; hachís
• fullPath; URL después de la finalización del análisis, consulta contenía parámetros y de hash completa de Road King
• Matched; una matriz, todos los registros anidada ruta Road King contiene el segmento de ruta actual, es decir, todos los objetos principales se encaminan en el interior de la matriz, <enrutador Ver /> componentes utilizar esta propiedad
• nombre, la ruta actual del nombre, y el nombre de alias relacionado
• redirectedFrom; fuente de redireccionamiento nombre de enrutamiento, y alias y redirecciones relacionados.
• meta, meta 值

nombre, Meta dos valores es crear vuerouter, cada router para el enrutamiento de registro entrante correspondiente al nombre de atributo y mata atributo , por lo general después de algún otro tipo de transformación

 escritor por: Desert QQ: 22969969

Para el castaño:

    < Div ID = "aplicación" > 
        < enrutador-link a = "/ login" >登陆</ enrutador-link > 
        < enrutador-link a = "/ info / 15" >详情页</ enrutador-link >      
        < hr / > 
        < enrutador-view > </ enrutador-view > 
    </ div > 
    < secuencia de comandos > 
        const inicio de sesión = {plantilla: ' ! <div> Página de Acceso </ div> ' }                       
        información const   = {Plantilla: ' <div> id:. {{$ route.params.id esta}} </ div> ' }
        rutas const = [                                                       
            {ruta: ' / login ' , componente: de acceso, nombre: ' entrada ' },
            {ruta: ' / info /: id ' , componentes: información, nombre: ' información ' },
        ]
        aplicación const =  nueva vista ({                                                     
            el: ' #app ' ,
            enrutador: nueva VueRouter ({} rutas)
        })
    </ Escritura >

Render de la siguiente manera:

Hacemos clic en la ruta de aterrizaje a la página de inicio de sesión, introduzca la ruta $ aplicación de consola, a continuación, haga clic en la página de detalles, a continuación, introduzca la ruta $ aplicación de consola, imprimir, respectivamente, de la siguiente manera:

la página de inicio de sesión: Página de información:

$ Ruta utiliza a menudo cuando el objeto está en la guardia de navegación, el parámetro a 2 es el objeto $ ruta.

Cuando se ejecuta la instalación VueRouter instalarlo, el método es el siguiente:

Object.defineProperty (Vue.prototype, '$ Router', {                  // Vue ejemplo $ Router señalando this._routerRoot._router 
    GET: la función get () { devolver  la presente ._routerRoot._router}
});

Object.defineProperty (Vue.prototype, '$ ruta', {                  // 设置$ ruta $为este root._route. 
    Get: la función get () { devolver  este ._routerRoot._route}
});

Mediante la ejecución de Object.defineProperty, visitamos esto dentro de Vue. $ Router y este. $ Ruta han venido señalando this._routerRoot._router y this._routeRoot._route, y estos dos atributos incorporados al VueRouter en el momento de la instalación vue beforeCreate implementado dentro de la función del ciclo de vida, de la siguiente manera:

beforeCreate: función beforeCreate () {
   IF (ISDEF ( el este $ options.router).) {              // Si esto existen $ options.router, es decir, pasar al crear un objeto enrutador ejemplo Vue. 
    el este ._routerRoot = el este ;                          // en el ejemplo Vue añadir un punto _routerRoot a sí mismos, es decir, Vue ejemplo, 
    la presente ._router = el presente $ options.router ;.              // añadir instancia vue-router está configurado de un punto en el Vue _router ejemplo, 
    la presente ._router.init ( el presente );                          // llamadas de instancia VUE-Router init () inicializa parámetros Vue ejemplo 
    Vue.util.defineReactive ( el este , '_route', el este._router.history.current);          // por defineReactive Vue puesto _router en respuesta, igual this._router.history.current 
  } else {
     la presente ._routerRoot = ( el este . $ && padres del este $ parent._routerRoot). || el este ;
  }
  registerInstance ( este , este );
},

this._router.history.current igual atributo de instancia VueRouter .history.current, el método será ejecutado en el prototipo Historia updateRoute después de cada salto de enrutamiento, restablece atributos actuales, crear una ruta de objetos en este método es el siguiente:

    función createRoute (registro, ubicación, redirectedFrom, Router) {     // crear un registro objeto de ruta: la información de enrutamiento lugar de grabación: necesidad de saltar de enrutamiento de direcciones (incluyendo la ruta, consulta, hash y params objeto) redirectedForm: Desconocido enrutador: Vue- Router casos 
        var stringifyQuery $$ = Router 1 &&. router.options.stringifyQuery;

        var location.query consulta || = {};                                    // restablecer la consulta, si el conjunto no es objeto vacío se restablece en 
        el try {
            consulta = clon (consulta);
        } Catch (e) {}

        var ruta = {                                                        // agregar una ruta de objetos 
            nombre: location.name || (Registro && record.name),                      // información de nombre 
            Meta: (Registro && record.meta) || {},                                 // Meta información 
            de ruta: ubicación || .Path '/' ,
            el hash: la location.hash || '',                                           // enrutamiento Rey del camino 
            de consulta: Consulta,                                                        // ruta el hash 
            params: location.params || {},                                       // ruta del params 
            fullPath: GetFullPath (ubicación, stringifyQuery $$ 1). ,                  // completa Road king 
            encontrados: formatMatch registro (registro) :? []                           // registro del registro actual para grabar todo el nodo padre del nodo hasta el ancestro 
        };
         SI (redirectedFrom) {
            route.redirectedFrom = GetFullPath (redirectedFrom, stringifyQuery $$ 1 );
        }
        retorno Object.freeze (ruta)                                          // Por último, la ruta para congelar objetos y de retorno (que no permite nuevas propiedades) 
    }