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

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

你可能感兴趣的:(Web前端,vue.js,前端,javascript)