一，未處理404前的情況:

說明：劉巨集締的架構森林是一個專注架構的部落格，地址：https://www.cnblogs.com/architectforest

對應的原始碼可以訪問這裡獲取：https://github.com/liuhongdi/
或:https://gitee.com/liuhongdi

說明：作者:劉巨集締 郵箱: [email protected]

二，編寫程式碼:

<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>

    { 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',
    }
...

三，測試效果

四，檢視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

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