Directorio de artículos
descripción general
enrutamiento de fondo
1. Según las diferentes solicitudes de URL de los usuarios, se devuelve contenido diferente, que es esencialmente la correspondencia entre las direcciones de solicitud de URL y los recursos del servidor.
2. Sin embargo, existen problemas de rendimiento en el renderizado de fondo.
enrutamiento frontal
3. Entonces existe el renderizado de edición previa de Ajax. El renderizado front-end puede mejorar el rendimiento, pero no admite las operaciones de avance y retroceso del navegador.
4. En este momento, apareció nuevamente el programa de aplicación de una sola página SPA (Single Page Application). Todo el sitio web tiene una sola página. El cambio de contenido se realiza mediante la actualización parcial de Ajax y admite las operaciones de avance y retroceso del navegador. Barra de dirección.
5. Uno de los principios de implementación de SPA se basa en el hash de la dirección URL (el cambio del hash hará que el navegador registre el cambio en el historial de acceso, pero el cambio del hash no activará una nueva solicitud de URL) . En el proceso de implementación de SPA, el punto técnico central es el enrutamiento frontal.
6. El enrutamiento front-end consiste en mostrar contenido de página diferente según los diferentes eventos del usuario. La esencia es la correspondencia entre los eventos del usuario y las funciones de procesamiento de eventos.
Vista del enrutador
Aquí está el enlace de la documentación oficial.
Vue Router es el administrador de enrutamiento oficial para Vue.js. Está profundamente integrado con el núcleo de Vue.js y puede usarse de manera muy conveniente para el desarrollo de aplicaciones SPA.
Funciona de la siguiente manera:
1. Admite el modo historial HTML5 o el modo hash.
2. Admite enrutamiento anidado.
3. Admite parámetros de enrutamiento.
4. Admite enrutamiento programático.
5. Admite enrutamiento con nombre.
Instalar
npm install vue-router --save
Uso común de vue-router
Enrutamiento de carga diferida
La forma de carga diferida de rutas.
Método 1: combinar los componentes asincrónicos de Vue y el análisis de código de Webpack
const Home = resolve => {
require. ensure(['../ components/Home.vue'], () => {
resolve(require('../ components/Home.vue')) })};
Método 2: método de escritura AMD
const About = resolve => require([' ../ components/ About.vue'], resolve);
Método 3: en ES6, podemos tener una forma más sencilla de organizar la división del código de los componentes asíncronos de Vue y Webpack
const Home = () => import(' . ./ components/Home.vue ' )
El efecto de la carga diferida de rutas:
redirección de ruta
La redirección de enrutamiento se refiere a: cuando un usuario accede a la dirección A, el usuario se ve obligado a saltar a la dirección C para mostrar una página de componente específica.
Al especificar una nueva dirección de enrutamiento a través del atributo de redirección de la regla de enrutamiento, puede configurar fácilmente la redirección de enrutamiento:
cuando el hash es /, saltará al componente de inicio de forma predeterminada, evitando que se muestre nada cuando el hash sea /. Y la escena acaba de ingresar a la página, la página de inicio se muestra de forma predeterminada.
{ ruta: '*', componente: NotFound } se puede agregar al final, lo que indica que este componente se mostrará cuando ninguna de las rutas anteriores coincida
rutas anidadas
La visualización anidada de componentes mediante enrutamiento se denomina enrutamiento anidado.
Por ejemplo, hay dos subcomponentes que deben mostrarse en el componente Acerca de
Declarar enlaces de subruta y marcadores de posición de subruta
En el componente About.vue, declare los enlaces de ruta secundaria para tab1 y tab2 y los marcadores de posición de ruta secundaria. El código de muestra es el siguiente:
Declare reglas de subenrutamiento a través del atributo secundario
En el módulo de enrutamiento src/router/index.js, importe los componentes requeridos y use el atributo secundario para declarar reglas de subenrutamiento:
Nota: la ruta del subenrutamiento no necesita para agregar /
coincidencia de ruta dinámica
Pensamiento: hay tres enlaces de enrutamiento de la siguiente manera:
Después de que la película sea el parámetro, los datos correspondientes se representarán en el componente Película de acuerdo con el parámetro.
¿Es factible definir las siguientes tres reglas de enrutamiento?
Desventaja: La reutilización de las reglas de enrutamiento es deficiente.
El concepto de enrutamiento dinámico
El enrutamiento dinámico se refiere a definir la parte variable de la dirección Hash como un elemento de parámetro, mejorando así la reutilización de las reglas de enrutamiento.
Utilice los dos puntos ingleses (:) en vue-router para definir los elementos de parámetros de la ruta. El código de muestra es el siguiente:
En este caso, /movie/:id debe pasar parámetros y /movie/:id? significa que no se pueden pasar parámetros.
Objeto de parámetro $route.params
En el componente representado por la ruta dinámica, puede usar el objeto this.$route.params para acceder al valor del parámetro coincidente dinámicamente y no es necesario agregarlo en la plantilla.
Utilice accesorios para recibir parámetros de ruta
Para simplificar la forma de adquisición de parámetros de enrutamiento, vue-router permite habilitar el paso de parámetros de accesorios en las reglas de enrutamiento. El código de muestra es el siguiente:
Navegación declarativa y navegación programática
Navegación declarativa
En el navegador, hacer clic en el enlace para lograr la navegación se llama navegación declarativa . Por ejemplo:
- Hacer clic en
<a>enlaces en páginas web normales y hacer clic en proyectos de Vue<router-link>son navegación declarativa.
En el navegador, el método de llamar a métodos API para realizar la navegación se llama navegación programática . Por ejemplo:
- El método de llamar a location.href para saltar a una nueva página en una página web normal pertenece a la navegación programática.
navegación programática
router.push
salta a la dirección hash especificada y agrega un registro histórico
Llame a este método.$router.push() para saltar a la dirección hash especificada y mostrar la página del componente correspondiente. El código de muestra es el siguiente:
router.replace
salta a la dirección hash especificada y reemplaza el registro del historial actual
Similar a empujar, la diferencia:
- push agregará un registro histórico
- reemplazar no agrega al historial, pero reemplaza el historial actual
router.go
implementa el historial de navegación hacia adelante y hacia atrás
Llame a este método.$router.go() para avanzar y retroceder en el historial de navegación. El código de muestra es el siguiente:
Simplificación: en el desarrollo real, generalmente solo se moverá una capa de páginas hacia adelante y hacia atrás. Por lo tanto, vue-router proporciona los siguientes dos métodos convenientes:
$enrutador.back()
En la historia, volver a la página anterior.
$enrutador.adelante()
En la historia, avanza a la página siguiente.
guardia de navegación
Los guardias de navegación pueden controlar el acceso a las rutas. El diagrama esquemático es el siguiente:
Guardia del Frente Global
Cada vez que se produzca un salto de navegación de ruta, se activará la preguardia global. Por tanto, en la preguardia global, los programadores pueden controlar los derechos de acceso de cada ruta:
Los 3 parámetros formales del método de guardia.
La función de devolución de llamada de la preguardia global recibe 3 parámetros formales en el formato:
3 formas de llamar a la siguiente función
Con referencia al diagrama esquemático, analice los resultados finales de los tres métodos de llamada de la siguiente función:
El usuario actual tiene derecho de acceso a la página de inicio en segundo plano y puede acceder directamente: next()
El usuario actual no tiene acceso a la página de inicio en segundo plano, lo que le obliga a saltar a la página de inicio de sesión: next('/login')
El usuario actual no tiene acceso a la página de inicio en segundo plano y no se permite saltar a la página de inicio en segundo plano: siguiente (falso)
Controlar el acceso a la página de inicio en segundo plano
Cuando se requieren muchos guardias de navegación, se puede utilizar el siguiente enfoque:
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 要进行导航守卫的路径值
const pathArr = ['/home','/home/users', '/home/rights']
if (pathArr.indexOf(to.path) !== -1) {
const token = localStorage.getItem('token')
if (token) {
next()
} else {
next('/login')
}
} else {
next()
}
})
Otra forma de escribir es agregar un elemento de metaconfiguración a cada ruta y juzgar si es necesario juzgarlo por los valores verdadero y falso en el meta.
{
path: 'users',
component: Users,
meta: {
isAuth: true },
},
...
// 全局前置守卫
router.beforeEach((to, from, next) => {
if (to.meta.isAuth) {
// 判断是否需要进行导航守卫
const token = localStorage.getItem('token')
if (token) {
next()
} else {
next('/login')
}
} else {
next()
}
})
Dos modos de trabajo de enrutamiento
modo hash
- De forma predeterminada, el modo de trabajo de hash está habilitado.
#Significa hash, seguido del valor hash.- Nota: los valores después de # no se envían al servidor
modo historia
Para habilitar el modo historial, debe agregar un elemento de configuración de modo. El valor predeterminado es
historial hash sin #
La diferencia entre hash e historia.
modo hsah
- Siempre hay un signo # en la dirección, lo cual no es bonito.
- Si la dirección se comparte a través de una aplicación móvil de terceros en el futuro, si la aplicación tiene una validación estricta, la dirección se marcará como ilegal.
- buena compatibilidad
modo historia
- La dirección es limpia y hermosa.
- La compatibilidad es ligeramente peor que el modo hash
- Cuando la aplicación se implementa en línea, necesita el apoyo del personal de back-end para resolver el problema de actualizar el servidor de páginas 404
(por ejemplo, http://localhost:8080/home/message, originalmente http://localhost:8080 , cuando hace clic para ir a la página del mensaje, la ruta ha cambiado, la ruta sigue siendo http://localhost:8080/home/message cuando se actualiza y /home/message también se enviará al servidor, pero la gente Solo conozca http://localhost:8080, el hash no será así, http://localhost:8080/#/home/message, porque no se enviará nada después de # al servidor)
fuente
Tutorial ultra detallado de enrutamiento de Vue-router Artículo
de explicación detallada de vue-router
que le permitirá comprender rápidamente el enrutamiento de Vue-Router