Diez, notas de estudio de vue-router, enrutamiento conocido, uso básico de vue-router, enrutamiento anidado de vue-router, transferencia de parámetros de vue-router, protección de navegación de vue-router, keep-alive

Uno, conoce el enrutamiento

1.1 ¿Qué es el enrutamiento?

Hablando de enrutamiento, ¿en qué piensas?
Enrutamiento es un término en ingeniería de redes.
El enrutamiento es la actividad de transferir información desde una dirección de origen a una dirección de destino a través de una red interconectada. - Wikipedia

Uh, ¿qué demonios? No lo entendí.
En la vida, ¿alguna vez hemos oído hablar del concepto de enrutamiento? Por supuesto, enrutadores.
¿Qué hacen los enrutadores? ¿Alguna vez lo has pensado?

El enrutador proporciona dos mecanismos: enrutamiento y reenvío.

• El enrutamiento consiste en determinar la ruta de un paquete desde su origen hasta su destino.
• El reenvío transfiere los datos de la entrada a la salida adecuada.

Existe un concepto muy importante en el enrutamiento llamado tabla de enrutamiento La
tabla de enrutamiento es esencialmente una tabla de mapeo, que determina la dirección del paquete de datos.

1.2 Etapa de enrutamiento de back-end

En el desarrollo inicial del sitio web, el servidor representaba toda la página HTML.

• El servidor genera y renderiza directamente la página HTML correspondiente y la devuelve al cliente para su visualización.

Pero, para un sitio web, ¿cómo lidiar con tantos servidores de páginas?

• Una página tiene su propia URL correspondiente, que es la URL.
• La URL se enviará al servidor, el servidor hará coincidir la URL a través de la normal y finalmente se entregará a un controlador para su procesamiento.
• El controlador realiza varios procesamientos, finalmente genera HTML o datos y los devuelve al front-end.
• Esto completa una operación IO.

La operación anterior es el enrutamiento de back-end.

• Cuando nuestra página necesita solicitar un contenido de ruta diferente, se entrega al servidor para su procesamiento, el servidor muestra la página completa y la devuelve al cliente.
• En este caso, la página renderizada no necesita cargar ningún js y css por separado, y se puede entregar directamente al navegador para su visualización, lo que también favorece la optimización SEO.

Desventajas del enrutamiento de back-end:

• En un caso, el personal de back-end escribe y mantiene los módulos de toda la página.
• Otra situación es que si los desarrolladores de aplicaciones para el usuario quieren desarrollar páginas, necesitan escribir código de página en lenguajes como PHP y Java.
• Y generalmente el código HTML y los datos y la lógica correspondiente se mezclarán, escribir y mantener son cosas muy malas.

1.3 Etapa de enrutamiento de front-end

Etapa de separación de front-end:

• Con la llegada del Ajax, existe un modelo de desarrollo que separa los extremos delantero y trasero.
• El backend solo proporciona API para devolver datos, y el frontend obtiene datos a través de Ajax y puede representar los datos en la página a través de JavaScript.
• La mayor ventaja de esto es que las responsabilidades de front-end y back-end son claras, el back-end se centra en los datos y el front-end se centra en la interacción y la visualización.
• Y cuando aparece el terminal móvil (iOS / Android), el backend no necesita realizar ningún procesamiento, y el conjunto anterior de API aún se puede usar.
• En la actualidad, muchos sitios web todavía se desarrollan en este modo.

Etapa de aplicación enriquecida de una sola página:

• De hecho, la característica principal de SPA es agregar una capa de enrutamiento de front-end sobre la base de la separación de front-end y back-end.
• Es decir, la interfaz mantiene un conjunto de reglas de enrutamiento.

¿Cuál es el núcleo del enrutamiento de front-end?

• Cambie la URL, pero la página no se actualiza en su totalidad.
• ¿Cómo lograrlo?

1. Hash de la URL El hash de la
   URL también es el ancla (#), que es esencialmente para cambiar el atributo href de window.location.
   Podemos cambiar el href asignando directamente location.hash, pero la página no se actualiza
   
2. Modo de historial HTML5: pushState

• La interfaz del historial es nueva en HTML5 y tiene cinco modos para cambiar la URL sin actualizar la página.
• history.pushState ()
  

3. Modo de historial HTML5: replaceState
   

4. Modo de historial HTML5: ir

Nota complementaria:
solo se muestran tres métodos arriba

• Porque history.back () es equivalente a history.go (-1)
• history.forward () es equivalente a history.go (1)
  Estas tres interfaces son equivalentes al avance y retroceso de la interfaz del navegador.
  
  

Dos, el uso básico de vue-router.

2.1 Conozca vue-router

Los tres frameworks populares de front-end actualmente tienen sus propias implementaciones de enrutamiento:

• NgRouter de Angular
• React 的 ReactRouter
• Vue-router de Vue

Por supuesto, nuestro enfoque es vue-router

• Vue-router es el complemento de enrutamiento oficial de Vue.js. Está profundamente integrado con vue.js y es adecuado para crear aplicaciones de una sola página.
• Podemos visitar su sitio web oficial para conocerlo: https://router.vuejs.org/zh/

vue-router se basa en enrutamiento y componentes

• El enrutamiento se utiliza para establecer rutas de acceso y mapear rutas y componentes.
• En la aplicación de una sola página de vue-router, el cambio de la ruta de la página es el cambio del componente.

2.2 Instalar y usar vue-router

Debido a que hemos aprendido el paquete web, lo desarrollaremos principalmente a través de la ingeniería
en el desarrollo de seguimiento, por lo que en el seguimiento, podemos usar directamente npm para instalar el enrutador.

1. Paso 1: instale vue-router

npm install vue-router --save

2. Paso 2: Úselo en el proyecto modular (debido a que es un complemento, puede instalar la función de enrutamiento a través de Vue.use ()) para
   
   crear una instancia de enrutador:
   

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 1.通过Vue.use(插件)，安装插件
Vue.use(Router)

// 2.创建Router对象
export default new Router({
    
    
  // 配置路由和组件之间的映射关系
  routes: [
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

// 3.将router对象传入Vue实例中

2.3 Pasos para usar vue-router:

1. Paso 1: cree componentes de enrutamiento

2. Paso 2: Configurar el mapeo de enrutamiento: relación de mapeo de componentes y ruta
   

3. Paso 3: use el enrutamiento: pase<router-link>和<router-view>
   

2.4 Proceso completo

1. Crear instancia de enrutador
   
2. Montar en la instancia de Vue
   
3. Paso 1: cree un componente de enrutamiento
   
4. Paso 2: configurar la relación de mapeo entre componentes y rutas
   
5. Paso 3: Utilice el enrutamiento.
   
   Nota:

• <router-link>: La etiqueta es un componente integrado en vue-router y se representará como una <a>etiqueta.
• <router-view>: Esta etiqueta representará dinámicamente diferentes componentes según la ruta actual.
  Otro contenido de la página web, como el título / navegación en la parte superior, o alguna información de derechos de autor en la parte inferior, estarán <router-view>en el mismo nivel.
• Cuando se cambia la ruta, los <router-view>componentes montados se cambian y el resto del contenido no cambiará.
  

2.5 La ruta predeterminada de la ruta

Tenemos otra implementación no tan buena aquí:

• De forma predeterminada, cuando ingresa a la página de inicio del sitio web, queremos <router-view>representar el contenido de la página de inicio.
• Pero en nuestra implementación, el componente de la página de inicio no se muestra de forma predeterminada y el usuario debe hacer clic en él.

¿Cómo puedo hacer que la ruta salte a la página de inicio de forma predeterminada y <router-view>represente el componente de la página de inicio?

• Muy sencillo, solo necesitamos configurar un mapeo más.
  
  Análisis de configuración:
• Configuramos otro mapeo en rutas.
• La configuración de la ruta es la ruta raíz: /
• Redirigir es redirección, es decir, redirigimos la ruta raíz a la ruta / home, para que podamos obtener los resultados que queremos.
  

2.6 No use el método hash, use el modo Historial HTML5

Mencionamos anteriormente que hay dos formas de cambiar la ruta:

• Hash de URL
• Historia de HTML5 的
• De forma predeterminada, cambia el hash de la URL utilizada para la ruta.

Si desea utilizar el modo de historial HTML5, es muy simple, solo configure de la siguiente manera:

2.7 suplemento de enlace de enrutador

• En lo anterior <router-link>, solo usamos un atributo: to, que se usa para especificar la ruta de salto.
  

• <router-link>Hay algunos otros atributos:

1. etiqueta: etiqueta puede especificar <router-link>qué componente se representará más tarde, por ejemplo, el código anterior se representará como un <li>elemento en lugar de<a>
   

2. reemplazar: replaceno se dejará ningún historyregistro, por lo que si se especifica reemplazar, la tecla de retroceso no puede volver a la página anterior

3. active-class: cuando se establece <router-link>el tiempo correspondiente a la ruta que coincide con éxito automáticamente con el elemento actual, router-link-activese classproporciona a se active-classpuede cambiar el nombre predeterminado.
   
   El nombre específico de la clase también puede ser modificado por la instancia del enrutador de atributo, es decir, puede estar dispuesto en la ruta Opción LinkActiveClass para modificar el nombre de la clase activa:
   

• Esta clase se usa cuando se realiza el menú de navegación resaltado o la barra de pestañas inferior.
• Pero, por lo general, no modificará las propiedades de la clase, y puede usar directamente el router-link-active predeterminado.
  
  
  Suplemento: exact-active-class
• Similar a active-class, una clase que solo aparece bajo una coincidencia precisa.
• Cuando veamos el enrutamiento anidado más adelante, veamos este atributo nuevamente.

2.8 Salto de código de enrutamiento

A veces, es posible que el salto de página deba ejecutar el código JavaScript correspondiente. En este momento, se puede utilizar el segundo método de salto

Por ejemplo, modificamos el código de la siguiente manera:

2.9 Enrutamiento dinámico

En algunos casos, la ruta de una página puede ser incierta. Por ejemplo, cuando ingresamos a la interfaz de usuario, esperamos que la ruta sea la siguiente:

• / usuario / aaaa 或 / usuario / bbbb
• Además del frente / usuario, también se sigue la identificación del usuario
• Esta relación de coincidencia entre la ruta y el componente se denomina enrutamiento dinámico (también es una forma de enrutar datos).
  
  

2.10 Reconocer la carga diferida del enrutamiento

La explicación oficial:

• Cuando se crea una aplicación mediante el empaquetado, el paquete Javascript se vuelve muy grande y afecta la carga de la página.
• Si podemos dividir los componentes correspondientes a diferentes rutas en diferentes bloques de código, y luego cargar los componentes correspondientes cuando se accede a la ruta, será más eficiente

¿De qué están hablando los funcionarios?

• En primer lugar, sabemos que normalmente se definen muchas páginas diferentes en el enrutamiento.
• ¿Dónde está finalmente empaquetada esta página? Generalmente, se coloca en un archivo js.
• Sin embargo, poner tantas páginas en un archivo js inevitablemente hará que esta página sea muy grande.
• Si solicitamos esta página al servidor a la vez, puede llevar cierto tiempo e incluso aparece un breve espacio en blanco en la computadora del usuario.

¿Cómo evitar esta situación? Usar la carga diferida de enrutamiento es suficiente.
¿Qué hace la carga diferida de enrutamiento?

• La función principal del enrutamiento de carga diferida es empaquetar los componentes correspondientes al enrutamiento en un bloque de código js.
• Solo cuando se acceda a esta ruta, se cargará el componente correspondiente

El efecto de enrutar la carga diferida La forma de la

carga diferida:

Tres enrutamiento anidado de vue-router

3.1 reconocer el enrutamiento anidado

El enrutamiento anidado es una característica muy común

• Por ejemplo, en la página de inicio, queremos acceder a algunos contenidos a través de / home / news y / home / message.
• Una ruta asigna un componente y, al acceder a estas dos rutas, también se mostrarán dos componentes por separado.

La relación entre rutas y componentes es la siguiente:

Hay dos pasos para implementar el enrutamiento anidado:

1. Cree los subcomponentes correspondientes y configure las subrutas correspondientes en el mapa de ruta.
2. Utilice etiquetas dentro de los componentes.

Cree el subcomponente correspondiente:

configure la subruta correspondiente en el mapa de ruta:

use la etiqueta dentro del componente:

Cuatro, transferencia de parámetros de vue-router

4.1 Hay dos tipos principales de parámetros de paso: params y query

1. Tipos de parámetros:

• Configurar el formato de enrutamiento: / enrutador /: id
  

• Método de paso: siga el valor correspondiente después de la ruta
  

• La ruta formada después de pasar: / enrutador / 123, / enrutador / abc
  
  

2. Tipo de consulta:

• Formato de enrutamiento de configuración: / enrutador, es decir, configuración común
  

• Método de entrega: use la clave de consulta como método de entrega en el objeto
  

• La ruta formada después de pasar: / router? Id = 123, / router? Id = abc
  
  

4.2 Cómo utilizar los parámetros pasados

¿Cómo usarlos? También hay dos formas: <router-link>la forma y la forma del código JavaScript.

1. Paso de parámetros método 1: <router-link>
   

2. Método de paso de parámetros 2: código JavaScript
   

4.3 El método de obtención de parámetros en el componente:

• Los parámetros se obtienen a través del objeto $ route.
• En las aplicaciones que usan vue-router, el objeto de ruta se inyectará en cada componente, se le asignará un valor this.$routey, cuando se cambie la ruta, se actualizará el objeto de ruta.

La información que se transmite a través de $ route es la siguiente:

4.4 $routey $routerhay una diferencia

1. $routerEs una instancia de VueRouter. Si desea navegar a una URL diferente, use el $router.pushmétodo
2. $routeEs el objeto de salto del enrutador actual, que puede obtener el nombre, la ruta, la consulta, los parámetros, etc.
   
   
   

Cinco, guardia de navegación vue-router

5.1 ¿Por qué utilizar protectores de navegación?

Consideremos un requisito: ¿Cómo cambiar el título de una página web en una aplicación SPA?

• El título de la página se <title>muestra a través de la pantalla, pero el SPA solo tiene un HTML fijo y el título no cambiará al cambiar entre diferentes páginas.
• Pero podemos modificar <title>el contenido a través de JavaScript window.document.title = '新的标题'...

Entonces, en el proyecto Vue, ¿dónde modificar? ¿Cuándo es el momento adecuado para modificar?

1. Método de modificación ordinario:

• El lugar en el que podemos pensar fácilmente para modificar el título es en el archivo .vue del componente correspondiente a cada ruta.
• A través de la función de ciclo de declaración montada, ejecute el código correspondiente para modificarlo.
• Pero cuando hay muchas páginas, este método no es fácil de mantener (porque es necesario ejecutar un código similar en varias páginas).
  

2. ¿Existe una mejor manera? Simplemente use la protección de navegación.
   ¿Qué es la protección de navegación?

• La protección de navegación proporcionada por vue-router se utiliza principalmente para monitorear la entrada y salida de la ruta.
• vue-router proporciona funciones de gancho beforeEach y afterEach, que se activarán antes y después de que la ruta esté a punto de cambiar.

5.2 Uso de la guardia de navegación

Podemos usar beforeEach para completar la modificación del título.

• En primer lugar, podemos definir algunos títulos en el gancho, que se pueden definir mediante meta
• En segundo lugar, utilice la protección de navegación para modificar nuestro título.
  

Análisis de tres parámetros del gancho de navegación:

1. to: El objeto de enrutamiento del destino que está a punto de ingresar.
2. from: El objeto de ruta que la navegación actual está a punto de abandonar.
3. siguiente: Después de llamar a este método, puede ingresar el siguiente gancho.

5.3 Suplemento de guardia de navegación

1. Suplemento 1: si se trata de un post hook, es decir, afterEach, no hay necesidad de llamar activamente a la función next ().
   

2. Suplemento 2: La protección de navegación que usamos anteriormente se llama protección global.

• Un guardia dedicado al enrutamiento.
  

• El protector dentro del componente.
  

Para obtener más contenido, puede consultar el sitio web oficial para aprender

六 、 mantener vivo

Keep-alive es un componente integrado de Vue, que puede mantener el estado de los componentes contenidos o evitar la re-renderización.

• Tienen dos propiedades muy importantes:
• include-string o expresión regular, solo los componentes coincidentes se almacenarán en caché
• exclude-string o expresión regular, los componentes coincidentes no se almacenarán en caché
  

Debido a que la exclusión excluye los componentes Perfil y Usuario, ni los componentes Perfil ni Usuario se almacenarán en caché y se crearán y destruirán repetidamente:

Router-view también es un componente. Si está directamente envuelto en Keep-Alive, todos los componentes de la vista que coincidan con la ruta se almacenarán en caché:

verificado por la función de ciclo de vida creada.
Si no se utiliza Keep-Alive: los
componentes de la página de inicio se crean repetidamente y destruir

Use Keep-Alive: la
página de inicio no se creará ni destruirá repetidamente