Vue-Router 4添加beforeEach守卫后路由失效问题求助

问题原因 #

你采用的createRouter(...).beforeEach(...)链式赋值写法，在Laravel+Vite的环境下会导致路由实例初始化异常，进而使路由停止工作。

正确写法 #

先创建完整的路由实例，再单独注册beforeEach守卫：

export const router = createRouter({
    routes,
    history: createWebHistory(import.meta.env.BASE_URL),
    linkActiveClass: 'active'
})

// 注册路由守卫
router.beforeEach((to, from) => {
    return true
})

受保护页面的守卫实现 #

如果需要保护特定页面，可以给路由添加meta标记，再在守卫中做权限校验：

1. 路由配置添加权限标记 #

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/Home.vue')
    },
    {
        path: '/admin',
        name: 'admin',
        component: () => import('../views/Admin.vue'),
        meta: { requiresAuth: true } // 标记该路由需要权限验证
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('../views/Login.vue')
    }
]

2. 完善守卫逻辑 #

// 示例：从localStorage或Pinia获取登录状态
const isAuthenticated = () => {
    return localStorage.getItem('auth_token') !== null
}

router.beforeEach((to, from) => {
    // 目标路由需要权限且用户未登录时，跳转到登录页
    if (to.meta.requiresAuth && !isAuthenticated()) {
        return { name: 'login' }
    }
    // 其他情况允许正常导航
    return true
})

内容的提问来源于stack exchange，提问作者ndotie