Mirando hacia atrás en los primeros dos artículos, hablamos sobre el enrutamiento de primer nivel, la navegación declarativa, la navegación programática, la redirección de enrutamiento, el enrutamiento anidado y el enrutamiento dinámico. Luego, en este artículo, hablaremos sobre el contenido relacionado con el enrutamiento de Vue:
ruta nombrada
Las rutas con nombre, como su nombre indica, tienen rutas con nombre, y continúan con el caso anterior:
Configure la información de enrutamiento en el archivo /router/index.js - nomenclatura de ruta
<!-- /router/index.js -->
...
{
path: '/play/:id',
component: Play,
name: 'playMusic'
}
]
...
parámetros
Agregue un nombre a la información de la ruta y asigne el nombre de ruta de 'playMusic'; entonces, ¿qué se puede hacer agregando este nombre de ruta? El artículo anterior seleccionó la canción e hizo clic para saltar a la página de reproducción, utilizando el método js (ubicación.href) y el método de navegación programática proporcionado por vue-router (this.$router.push(`/play/${id} ` ) ), ahora que tiene un nombre de ruta, aún puede usar el método de navegación programática provisto por vue-router para ajustar el código de la siguiente manera:
<!-- /views/music/KuGou.vue -->
...
methods: {
handlePlay (id) {
// alert('获取歌曲id：' + id)
// location.href = '#/play'
// 编程式导航
// this.$router.push(`/play/${id}`)
this.$router.push({ name: 'playMusic', params: { id: id } })
}
}
}
</script>Probemos ejecutarlo:
consulta
Lo que se usa aquí es un método de enrutamiento dinámico. Al seleccionar una canción, llevar la identificación de la canción para saltar a la página de reproducción y solicitar el enlace de reproducción de la canción a través de la identificación de la canción. Antes de usar el enrutamiento dinámico, esto. $ es usó router.push(`/play/${id}`), ocurre la siguiente situación:
No hay información de enrutamiento para /play/10001 configurada en el enrutamiento, y hay más de una docena de canciones. ¡Obviamente no es razonable configurar dicha información de enrutamiento! Pero, ¿cómo se puede hacer esto sin usar el enrutamiento dinámico?
<!-- /router/index.js -->
...
{
path: '/play',
component: Play,
name: 'playMusic'
}
]
...
Los parámetros transportados por la ruta dinámica tienen el formato /play/:id, por lo que si los parámetros transportados tienen el formato /play?id=, ¿cómo se pueden obtener? -- consulta
<!-- PlayView.vue -->
<template>
<div>
<h3>播放界面</h3>
当前歌曲Id —— {
{ songId }}
</div>
</template>
<script>
export default {
mounted () {
// this.songId = this.$route.params.id
this.songId = this.$route.query.id
// console.log(this.$router)
console.log(this.$route)
},
data () {
return {
songId: ''
}
}
}
</script>Probemos ejecutarlo:
Luego, esta pieza de contenido ha llegado a su fin, envíe la identificación transportada a la página de reproducción y juegue a través de ajax para solicitar al backend que obtenga el enlace de reproducción y lo reproduzca en la página de reproducción; luego hablemos sobre el modo de enrutamiento:
patrón de enrutamiento
Vue admite dos modos de enrutamiento: 1. modo hash 2. modo historial
hash模式： http://localhost:8080/#/music/
history模式： http://localhost:8080/musicEl ejemplo anterior usa el modo hash:
¿Cómo modificarlo a modo historial? Simplemente agregue el modo: 'historia' en /router/index.js;
<!-- /router/index.js -->
...
const router = new VueRouter({
mode: 'history',
routes
})
export default routerUna vez completada la adición, vuelva a ejecutar el proyecto npm start;
El modo historial obviamente se ve mejor que el modo hash, pero ¿hay algún problema con el modo historial? Este modo requiere soporte de configuración de back-end, porque la aplicación es una aplicación de cliente de una sola página. Si el back-end no está configurado correctamente, devolverá 404 cuando el usuario acceda directamente a él en el navegador, ¡lo cual es feo! Por lo tanto, es necesario agregar un recurso candidato que cubra todas las situaciones del lado del servidor: si la URL no coincide con ningún recurso estático, debe devolver la misma página index.html, que es la página de la que depende la aplicación.
Para obtener más información, consulte este artículo: Diferentes modos de historial | Vue Router
Principio de enrutamiento:
1) enrutamiento hash:
Para saber cuándo cambiará la ruta, puede monitorear el cambio de ruta a través de window.onhashchange proporcionado por BOM, y location.hash puede cambiar la ruta y obtener el valor hash;
2) Ruta de la historia:
Usando las nuevas características de H5, el window.onpopstate proporcionado por BOM monitorea el cambio de la ruta, la ruta cambiada se puede actualizar y la ruta se cambia a través de history.pushState;
intercepción de ruta
¿Qué es la interceptación de rutas? Para dar un escenario muy común, cuando abre un sitio web, cuando desea navegar por el sitio web, cuando hace clic para leer, de repente saltará a una interfaz de inicio de sesión, si no ha seleccionado iniciar sesión para continuar, haga clic para leer otro contenido Cuando inicia sesión, aparece nuevamente una interfaz de inicio de sesión. Cuando inicia sesión, no volverá a aparecer; cuando salta a leer, de repente se bloquea al iniciar sesión; luego, cuando generalmente ingresa a ciertas páginas, ¿qué medios usa? ? Para verificar si tiene permiso para continuar leyendo. Por ejemplo, puede verificar si hay un token al iniciar sesión. Si lo hay, puede continuar leyendo sin interceptarlo. Si no, interceptarlo y saltar a la interfaz de inicio de sesión para Inicie sesión para obtener el token. Veamos un Cómo escribir común:
...
<script>
export default {
mounted () {
// 检查是否有token
if (!localStorage.getItem('token') {
this.$router.push('/login')
})
}
}
</script>Obviamente no hay problema con esto, pero no es lo mejor.Si hay demasiadas páginas para verificar, entonces es necesario verificar si hay un token en cada componente, y todo lo que debe verificarse debe escribirse. De esta manera, no solo se repite mucho código, es difícil de escribir, ¿hay alguna forma mejor? Sí, es el guardia de enrutamiento que se mencionará a continuación, se llama con más frecuencia, pero no es importante;
Las protecciones de enrutamiento se dividen en protecciones globales y protecciones internas de componentes, que son muy fáciles de entender. Si es necesario verificar e iniciar sesión en la mayoría de los componentes antes de ingresar, puede usar la protección global. Si es local o una pequeña cantidad de lugares involucran la verificación y el registro, puede usar las protecciones internas de los componentes, usémoslo de la siguiente manera:
beforeEach - enrutamiento previo global
Cuando http://localhost:8080/music se cambia a http://localhost:8080/music/kugou, es necesario interceptar y verificar la ruta, y escribir la ruta frontal global en /router/index.js:
<!-- /router/index.js -->
...
const router = new VueRouter({
mode: 'history',
routes
})
router.beforeEach((to, from, next) => {
// 拦截
if (to.fullPath === '/music/kugou') {
if (!localStorage.getItem('loginToken')) {
console.log('请先登录')
} else {
next()
}
} else {
// 放行
next()
}
})
export default routerPrueba y ejecuta el efecto:
Si hay varias rutas, se puede escribir en forma de matriz:
const auth = ['/music', '/order', 'monkey']
if (auth.includes(to.auth)) {
console.log('请先登录')
} else {
next()
}beforeRouteEnter —— protección interna del componente
Luego, si necesita este tipo de intercepción dentro de un componente, puede usar la protección interna del componente para verificar la intercepción antes de ingresar a esta ruta: beforeRouteEnter
<!-- PlayView.vue -->
...
<script>
export default {
beforeRouteEnter (to, from, next) {
if (!localStorage.getItem('loginToken')) {
console.log('检查token')
} else {
next()
}
}
}
</script>Entonces algunos principiantes tienen que preguntarse, ¿no está montado? El ciclo de vida montado se ha cargado y la instancia del componente no se ha creado cuando se usa la protección del componente beforeRouterEnter. Cuando la ruta no se ha cambiado, juzgará si hay un token de inicio de sesión. Si no hay un token de inicio de sesión, no cambiará Si hay un token de inicio de sesión, elegirá siguiente () Liberar la ruta;
Por supuesto, si desea obtener más información sobre el contenido de los protectores de enrutamiento, vaya aquí: dirección del documento oficial: Protector de navegación | Enrutador Vue
Enrutamiento de carga diferida
Antes de hablar sobre la carga diferida de rutas, hablemos sobre un escenario común que maneja. ¿Ha abierto algunos sitios web? Cuando ingresa al sitio web, la página se ha cargado durante mucho tiempo y no se ha mostrado; en este momento, puede estar cargando muchos archivos, como después del empaquetado.Algunos archivos js, css y algunos recursos estáticos;
A veces, el sitio web tarda mucho en abrirse y los impacientes pueden empezar a regañar. ¿Por qué tarda tanto en abrirse el sitio web? Algunos piensan erróneamente que se necesita "acceso científico a Internet" para ingresar al sitio web, por lo que conducirá a una experiencia de usuario deficiente. Aunque el contenido del sitio web es rico, el primer paso para que los usuarios ingresen al sitio web es poder ingresar al sitio web normalmente!
Al empaquetar y construir una aplicación, el paquete de JavaScript se volverá muy grande, lo que afectará la carga de la página. Si los componentes correspondientes a diferentes rutas se pueden dividir en diferentes bloques de código, y los componentes correspondientes se cargan cuando se accede a la ruta, será más ¡eficiente! Se puede lograr la combinación de los componentes asincrónicos de Vue y la función de división de código de Webpack. Para obtener más detalles, puede consultar aquí: Enrutamiento de carga diferida | Vue Router
Optimicemos el código escrito anteriormente para enrutar la carga diferida:
Codigo original:
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
import KuGou from '../views/music/KuGou.vue'
import KuWo from '../views/music/KuWo.vue'
import Play from '../views/PlayView.vue'
import Login from '../views/LoginView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/music'
},
{
path: '/music',
component: Music,
children: [
{
path: 'kugou',
component: KuGou
},
{
path: 'kuwo',
component: KuWo
}
]
},
....Optimización - carga diferida de rutas:
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件
// import Music from '../views/MusicView.vue'
// import KuGou from '../views/music/KuGou.vue'
// import KuWo from '../views/music/KuWo.vue'
// import Play from '../views/PlayView.vue'
// import Login from '../views/LoginView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/music'
},
{
path: '/music',
// component: Music,
component: () => import('../views/MusicView.vue'),
children: [
{
path: 'kugou',
// component: KuGou
component: () => import('../views/music/KuGou.vue')
},
{
path: 'kuwo',
// component: KuWo
component: () => import('../views/music/KuWo.vue')
}
]
},
....Los componentes se agrupan en fragmentos.
ps:
{
path: '/music',
// component: Music,
component: () => import('../views/MusicView.vue'),
...
// 按组分块
{
path: '/music',
// component: Music,
// component: () => import('../views/MusicView.vue'),
component: () => import(/* webpackChunkName : "group-foo" */ '../views/MusicView.vue')Luego, el contenido de este artículo termina aquí, y el contenido relacionado con el enrutamiento también llegará a su fin en este artículo.Revise el contenido anterior relacionado con el enrutamiento: configuración de enrutamiento de primer nivel, navegación declarativa, redirección de enrutamiento, enrutamiento anidado, navegación programática , enrutamiento dinámico, enrutamiento de comandos, interceptación de enrutamiento y carga diferida de enrutamiento; adjunte los dos primeros enlaces de contenido: Finalmente, ¡gracias por su apoyo!
