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

我来秋风扫落叶 2022-08-06 08:57:10 阅读数:368

配置vue页面vue3.0面如

一、配置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");
}
})

版权声明:本文为[我来秋风扫落叶]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/qq_15038701/article/details/126085820