Ganchos de navegación para vue-router

Ganchos de navegación para vue-router

En Vue.js, Vue-router se ha convertido en una herramienta de enrutamiento común. Los saltos de página y la carga de componentes en aplicaciones de una sola página (SPA) se pueden realizar fácilmente a través de Vue-router. Sin embargo, en la aplicación, es posible que necesitemos realizar algunas operaciones antes o después del salto de ruta, como la verificación de permisos, la precarga de datos, etc. En este momento, puede utilizar el enlace de navegación (Navigation Guards) proporcionado por Vue-router.

guardia delantera

La guardia delantera es una función que se llama antes de que salte la ruta. Vue-router proporciona las siguientes tres protecciones previas:

antes de cada

La preguardia global se llamará antes de cada salto de ruta y se puede usar para verificar el estado de inicio de sesión y otras operaciones. El guardia recibe tres parámetros: hasta, desde y siguiente. Entre ellos, to indica el objeto de ruta de destino que se va a redirigir, from indica el objeto de ruta actual y next es una función para indicar si la ruta puede continuar saltando.

javascriptCopiar código

router.beforeEach((to, from, next) => { if (to.meta.auth && !store.state.isLogin) { // 需要登录才能访问该路由 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } })

antes de resolver

La protección de análisis global se llama después de analizar las protecciones y los componentes de enrutamiento asíncrono en todos los componentes de enrutamiento, y se puede usar para la carga previa de datos de enrutamiento y otras operaciones. El guardia recibe tres parámetros: hasta, desde y siguiente.

javascriptCopiar código

router.beforeResolve((to, from, next) => { // 预加载组件数据 axios.get(to.meta.url).then(res => { to.meta.data = res.data next() }) })

después de cada

El enlace posterior global se llama después de cada salto de ruta y se puede usar para el desplazamiento de la página o las estadísticas de comportamiento del usuario. La guardia tiene un solo parámetro: a.

javascriptCopiar código

router.afterEach((to) => { // 页面滚动到顶部 window.scrollTo(0, 0) // 统计用户跳转行为 statistics(to.path) })

Protección exclusiva de enrutamiento

Las protecciones exclusivas de ruta son protecciones previas definidas solo en una determinada configuración de ruta. De esta forma, solo una determinada ruta puede recibir un tratamiento especial. Las protecciones exclusivas de enrutamiento se implementan agregando el atributo beforeEnter en la configuración de enrutamiento.

javascriptCopiar código

const routes = [ { path: '/admin', component: Admin, beforeEnter: (to, from, next) => { if (!store.state.isAdmin) { // 需要管理员权限才能访问 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } } } ]

Guardas dentro de los componentes

La protección dentro del componente se puede implementar agregando los atributos beforeRouteEnter, beforeRouteUpdate y beforeRouteLeave en la instancia del componente. Estas propiedades corresponden a las operaciones antes de que se active el componente de enrutamiento, cuando se actualice el enrutamiento y cuando abandone el enrutamiento.

javascriptCopiar código

export default { beforeRouteEnter (to, from, next) { // 组件被激活前的操作，例如数据加载等 getDetail(to.params.id).then(detail => { next(vm => vm.detail = detail) }) }, beforeRouteUpdate (to, from, next) { // 路由更新时的操作，例如数据更新等 updateDetail(to.params.id).then(detail => { this.detail = detail next() }) }, beforeRouteLeave (to, from, next) { // 路由离开时的操作，例如确认框等 if (this.isDirty) { if (confirm('你还有未保存的数据，确定要离开吗？')) { next() } else { next(false) } } else { next() } } }

ejemplo completo

El siguiente es un ejemplo completo del uso de protecciones previas, protecciones de solo ruta y protecciones de componentes:

javascriptCopiar código

const routes = [ { path: '/', component: Home, meta: { auth: true } }, { path: '/login', component: Login }, { path: '/admin', component: Admin, beforeEnter: (to, from, next) => { if (!store.state.isAdmin) { // 需要管理员权限才能访问 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } } }, { path: '/detail/:id', component: Detail, beforeRouteEnter (to, from, next) { // 组件被激活前的操作，例如数据加载等 getDetail(to.params.id).then(detail => { next(vm => vm.detail = detail) }) }, beforeRouteUpdate (to, from, next) { // 路由更新时的操作，例如数据更新等 updateDetail(to.params.id).then(detail => { this.detail = detail next() }) }, beforeRouteLeave (to, from, next) { // 路由离开时的操作，例如确认框等 if (this.isDirty) { if (confirm('你还有未保存的数据，确定要离开吗？')) { next() } else { next(false) } } else { next() } } } ] const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { if (to.meta.auth && !store.state.isLogin) { // 需要登录才能访问该路由 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } }) export default router

Mediante el uso de protecciones previas, protecciones exclusivas de rutas y protecciones de componentes, podemos lograr operaciones más flexibles de control de enrutamiento y precarga de datos. En aplicaciones prácticas, es necesario seleccionar un gancho de navegación apropiado según la situación específica para completar la operación correspondiente.

Resumir

Al usar el enlace de navegación de Vue-router, podemos realizar algunas operaciones antes o después del salto de enrutamiento, como la verificación de permisos, la precarga de datos, etc. Vue-router proporciona protecciones previas globales, protecciones de análisis global y ganchos posteriores globales, así como protecciones exclusivas de ruta y protecciones de componentes. Puede elegir el gancho de navegación adecuado para completar la operación correspondiente de acuerdo con la situación específica.

Debe tenerse en cuenta que al usar ganchos de navegación, evite los bucles infinitos, de lo contrario, el navegador se bloqueará. Al mismo tiempo, los ganchos de navegación no pueden reemplazar por completo los métodos de optimización, como la representación del lado del servidor y las pantallas esqueléticas. Es necesario considerar y seleccionar de manera integral la solución óptima en proyectos reales.