En el proyecto vue, cuando todos administran permisos, la mayoría usa la solución addRoute.
Cuando usaba vue-router antes, después de agregar rutas dinámicamente, todos también agregaban una página 404. Si la página 404 se escribía directamente en el archivo de enrutamiento, saltaría a la página 404 cuando se actualizara la página. La razón La razón es que antes de agregar enrutamiento dinámico, configuramos la ruta comodín 404. Después de cambiar para agregar la ruta dinámicamente, finalmente presionamos el comodín 404, y eso es todo.
Ruta guardia global:
router.beforeEach(async (to, from, next) => {
...// 其他逻辑省略，只看addRoutes部分
try {
await store.dispatch('GetUserInfo')
const res = await store.dispatch('getAsyncRoutes')
const asyncRoutes = handleRoutes(res)
router.addRoutes(asyncRoutes);
router.addRoutes({
path: "*",
name: "404",
component: () => import("@/views/error/404")
})
next({
...to, replace: true })
} catch (error) {
next(`/login?redirect=${
to.path}`)
}
})
Más tarde, se actualizó vue-router. Si 404 todavía se agrega dinámicamente como se indicó anteriormente, habrá problemas: actualice la página. Si la ruta actualmente se agrega dinámicamente, la consola informará una advertencia:
[Advertencia de Vue Router]: No se encontraron coincidencias para la ubicación con la ruta "xxxxx"
Esto se debe a que cuando actualizamos la página o accedemos a la ruta dinámica por primera vez, la guardia global se ejecuta antes de cada uno, pero en este momento no hemos agregado dinámicamente la ruta y no podemos encontrarla, y agregamos 404 posteriormente, lo que resulta en el Fallo de la primera ruta. Matched está vacío, por lo que se informa esta advertencia. Consulte los resultados impresos en la consola después de actualizar la página:
Solución:
El vue-router actualizado ya no necesita agregar dinámicamente rutas 404. Se puede escribir directamente en el archivo del enrutador inicializado:
enrutador/index.ts:
import {
createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
...// 其他路由省略
{
path: '/:catchAll(.*)',
name: '404',
component: () => import('@/views/error/index.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
Guardia global:
router.beforeEach(async (to) => {
...// 其他逻辑省略
try {
await userStore.getUserInfo()
const res: any = await appStore.getAsyncRoutes()
const asyncRoutes = handleRoutes(res)
asyncRoutes.forEach((item) => router.addRoute('layout', item))
return to.fullPath
} catch (error) {
return `/login?redirect=${
to.fullPath}`
}
})
De esta manera, cuando se actualiza la página y se usa beforeEach por primera vez, se coincidirá con 404 porque la ruta aún no se ha agregado dinámicamente. De esta manera, la coincidencia no estará vacía y no se informará ninguna advertencia:
