vue.js3.2.6:路由处理404报错(vue-router@4.0.11)

一，未处理404前的情况:

因为router不存在，所以显示成了白页

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/28/vue-js3-2-6-lu-you-chu-li-404-bao-cuo-vuerouter-4-11/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，编写代码:

1，404.vue

<template>
<div style="background:#000000;width: 100%;height:100%;display: flex;justify-content: center;align-items: center;">
  <img src="../../assets/img/404.jpg" style="width:100%;" />
</div>
</template>
 
<script>
export default {
  name: "404"
}
</script>
 
<style scoped>
 
</style>

2,在router中添加路由:

   如下:

    { path: "/sys", component: Index,meta:{title:"系统"},
        redirect: '/sys/404',
        children: [
            { path: '404', name: "info",meta:{title:"错误",top:"user"}, component: NotFound },
        ]
    },
    {
        path: '/:catchAll(.*)',
        name: 'All',
        redirect: '/sys/404',
    }
...

三，测试效果

访问一个不存在的地址，

看是否能跳转到/sys/404

如图:

 

四，查看vue.js的版本:

liuhongdi@lhdpc:/data/vue/storeweb$ npm list vue
storeweb@0.1.0 /data/vue/storeweb
├─┬ @vue/cli-plugin-babel@4.5.13
│ └─┬ @vue/babel-preset-app@4.5.13
│   └── vue@3.2.6 deduped
├─┬ element-plus@1.1.0-beta.7
│ └── vue@3.2.6 deduped
├─┬ vue-router@4.0.11
│ └── vue@3.2.6 deduped
├── vue@3.2.6
└─┬ vue3-carousel@0.1.27
  └── vue@3.2.6 deduped

查看 vue-router的版本:

liuhongdi@lhdpc:/data/vue/storeweb$ npm list vue-router
storeweb@0.1.0 /data/vue/storeweb
└── vue-router@4.0.11