vue中路由导航守卫实现404页面跳转

一、首先创建一个404.vue页面：

<template>
  <div>
    404！找不到页面
  </div>
</template>
<script>
export default {
  name: "404",
};
</script>

二、在router.js中添加路由：

{
        name: '404',
        path: '/404',
        meta: {
            title: '页面不存在'
        },
        component: () => import('@/views/404.vue')
    }

三、在router.js中添加路由导航守卫，可以在路由跳转之前去调用：

function checkPermission(path) {
    //router.getRoutes()可以获取当前项目的所有路由路径
    let hasPermission = router.getRoutes().filter(route => route.path == path).length
    if (hasPermission) {
        return true;
    }
    else {
        return false;
    }
}

//定义路由的导航守卫，beforeEach:在路由跳转之前实现
router.beforeEach((to, from, next) => {
    if (checkPermission(to.path)) {
        next()
    } else {
        next('/404')
    }
})

from:来自，to:去向，next():执行下一步。

四、当访问不存在的路径时便会自动跳转到404页面。