In the vue project, when everyone does permission management, most of them use the addRoute solution.
When using vue-router before, after dynamically adding routes, everyone also added a 404 page. If the 404 page was written directly in the routing file, it would jump to the 404 page when the page was refreshed. The reason The reason is that before adding dynamic routing, we configured the wildcard 404 route. After changing to dynamically adding the route, we finally push the 404 wildcard, and that's it.
Route global guard:
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}`)
}
})
Later, vue-router was upgraded. If 404 is still added dynamically as above, there will be problems: refresh the page. If the route is currently added dynamically, the console will report a warning:
[Vue Router warn]: No match found for location with path “xxxxx”
This is because when we refresh the page or access the dynamic route for the first time, the global guard is executed beforeEach, but at this time we have not dynamically added the route and cannot find it, and we added 404 subsequently, resulting in the failure of the first route. matched is empty, so this warning is reported. Please see the results printed on the console after refreshing the page:
Solution:
The upgraded vue-router no longer needs to dynamically add 404 routes. It can be written directly to the initialized router file:
router/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
Global guard:
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}`
}
})
In this way, when the page is refreshed and beforeEach is used for the first time, 404 will be matched because the route has not been dynamically added yet. In this way, matched will not be empty and no warning will be reported:
