VUE3.0的404页面如何配置以及路由守卫

最新推荐文章于 2025-04-14 15:19:25 发布

我来秋风扫落叶

最新推荐文章于 2025-04-14 15:19:25 发布

阅读量1.7k

点赞数 2

分类专栏： Web前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_15038701/article/details/126085820

版权

Web前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中配置404错误页面，通过在router中添加`:catchAll`路由实现。同时，详细讲解了路由守卫的设置，使用`router.beforeEach`进行权限验证，确保已登录用户无法访问登录页面，并在无token情况下重定向至登录页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、配置404页面

router中增加一行这样的代码即可，关键要素：/:catchAll(.*)

   {
            path: '/:catchAll(.*)',
            name: '404',
            component: () => import("@/views/404.vue")
        }

二、配置路由守卫

router.beforeEach((to, from, next) => {
    const token = storage.getItem('token');
    console.log("路由守卫")
    if (token || to.path === '/login') {
        next();
        //已经登录的时候不能跳转到登录页面
        if (token && to.path === '/login') {
            router.push('/home');
        }
        console.log(token);
    } else {
        next("/login");
    }
})