404页面不存在配置

 如果有跳转到不存在的页面就会自动跳转到404页面，进行提示！！

比如要跳转到home.vue页面 但是不小心跳转到了homes不存在的页面就会跳转到404页面进行提示！！

过程如下： 

---

 在左侧pages里面新建 404.vue页面，在去router/index.js里面配置路由

动态路由匹配，有不存在的页面时候会跳转到404页面

给页面： 404.vue页面路由配置，要放到所有路由最下面

{
        // 动态路由匹配 放到最下面 ，有不存在的页面时候会跳转到404页面
        path: '/:pathMatch(.*)',
        name: "NotFound",
        component: () => import('../pages/404.vue')
    },

---

404.vue页面布局，用到element-Plus 里面的 “Result结果”组件

<template>
  <div class="">
    <el-col :sm="12" :lg="6" :offset="9">
      <el-result
        icon="warning"
        title="404页面不存在"
        sub-title="不好意思，您要找的页面被风吹走了~">
        <template #extra>
          <el-button type="primary" @click="$router.push('/')">返回</el-button>
        </template>
      </el-result>
    </el-col>
  </div>
</template>