Hola a todos, soy el blogger de csdn: lqj_ mismo
Esta es la página de inicio de mi blog personal :
La última columna de diseño de graduación uniapp también se coloca a continuación:
https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482
Por lo general, también explicaré algunas cosas que sueles usar en el video de Bilibili,
Bienvenido a Bilibili:
Espacio personal de Lu Miaoer-Página personal de Lu Miaoer-哔哩哔哩Video
Tabla de contenido
Guardas dentro de los componentes
Guardia frontal global
La protección previa global generalmente se usa para el control de permisos y router.beforeEachse puede agregar usando:
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})
Cada método de guardia recibe dos parámetros:
to: la ruta de destino para ingresarfrom: la ruta que está saliendo actualmente
Los valores que se pueden devolver son los siguientes:
false: cancela la navegación actual.trueOundefinedllama al siguiente guardia.- Una dirección de ruta: cadena u objeto. Indica interrumpir la navegación actual e iniciar una nueva navegación.
router.beforeEach(async (to, from) => {
// 检查用户是否已登录，并且避免无限重定向
if (!isAuthenticated && to.name !== 'Login') {
return { name: 'Login' } // 将用户重定向到登录页面
}
})En la versión anterior de Vue Router, también se puede usar el tercer parámetro next. Actualmente, todavía es compatible, lo que significa que puede pasar un tercer argumento a cualquier guardia de navegación. En este caso, asegúrese nextde que se llame una sola vez en la guardia de navegación.
Guardia de análisis global
router.beforeResolveEl uso es router.beforeEachsimilar a . Se llama después de que se hayan resuelto todas las protecciones en componentes y los componentes de ruta asíncrona, antes de que se confirme la navegación. Este es un ejemplo que garantiza que los usuarios puedan acceder a un metaatributo personalizado:
router.beforeResolve(async to => {
if (to.meta.requiresCamera) {
try {
await askForCameraPermission()
} catch (error) {
if (error instanceof NotAllowedError) {
// ... 处理错误，然后取消导航
return false
} else {
// 意料之外的错误，取消导航并把错误传给全局处理器
throw error
}
}
}
})
router.beforeResolveLugar ideal para obtener datos o realizar cualquier otra acción (que se realiza después de ingresar a todas las páginas).
gancho de publicación global
A diferencia de los guardias, los posthooks globales no aceptan nextfunciones ni pueden saltar a otras direcciones de enrutamiento:
router.afterEach((to, from) => {
sendToAnalytics(to.fullPath)
})
Pero puede recibir failurecomo tercer parámetro:
router.afterEach((to, from, failure) => {
if (!failure) sendToAnalytics(to.fullPath)
})
router.afterEachÚtil para acceder a análisis, cambiar títulos de página, reclamar páginas y más.
Guardias exclusivos de ruta
Podemos definir guardias directamente en la configuración de la ruta beforeEnter:
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// 取消导航
return false
},
},
]
beforeEnterLos guardias solo disparan cuando ingresan a una ruta, no cuando params, queryo hashcambia. Por ejemplo, /users/2ingresar desde a /users/3o /users/2#infoingresar desde a /users/2#projectsno disparará.
También podemos pasar una serie de funciones a beforeEnter, lo que es útil cuando se reutilizan guardias para diferentes rutas:
// 清除 query 参数
function removeQueryParams(to) {
if (Object.keys(to.query).length)
return { path: to.path, query: {}, hash: to.hash }
}
// 清除 hash 值
function removeHash(to) {
if (to.hash) return { path: to.path, query: to.query, hash: '' }
}
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: [removeQueryParams, removeHash]
},
{
path: '/about',
component: UserDetails,
beforeEnter: [removeQueryParams]
}
]
Por supuesto, también puede usar el metaatributo de enrutamiento y 全局导航守卫para lograr las funciones anteriores.
Guardas dentro de los componentes
Con la API declarativa, puede agregar las siguientes protecciones a sus componentes:
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
beforeRouteEnterNo se puede acceder a la protección thisporque el componente aún no se ha creado. Puede nextacceder a la instancia del componente pasando una devolución de llamada a . Ejecute la devolución de llamada cuando se confirme la navegación y pase la instancia del componente como parámetro del método de devolución de llamada:
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
Nota: beforeRouteEnteres nextel único protector que admite pasar una función de devolución de llamada.
beforeRouteUpdateSe llama cuando la ruta actual cambia, pero el componente se reutiliza. Por ejemplo, para una ruta con parámetros dinámicos /users/:id, se llama al saltar entre /users/1y . /users/2Porque cuando esto sucede, el componente ya se ha montado y el protector de navegación puede acceder a la instancia del componente this.
beforeRouteUpdate (to, from) {
// 可以使用 this
this.name = to.params.name
}
beforeRouteLeavePor lo general, se usa para evitar que los usuarios se vayan repentinamente sin guardar los cambios. El guardia puede cancelar la navegación falsevolviendo .
beforeRouteLeave (to, from) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
// 取消导航并停留在当前页面
if (!answer) return false
}
onBeforeRouteUpdateUsando la API de composición, puede agregar y onBeforeRouteLeavenavegar guardias a los componentes :
<script setup lang="ts">
import { ref } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
const userData = ref()
onBeforeRouteUpdate(async (to, from) => {
//仅当 id 更改时才获取用户信息
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
onBeforeRouteLeave((to, from) => {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
// 取消导航并停留在当前页面
if (!answer) return false
})
</script>
Nota: Debido a setupla sincronización de las llamadas a funciones, no existe el uso de la API de composición onBeforeRouteEnter.