vue:路由错误/404 not found(vue-router@4.2.4)

 

一，官方文档地址: 

https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

二， 代码:

1,router配置

 { path: '/:pathMatch(.*)*', name: 'NotFound',meta:{title:"路由未匹配",top:"3"}, component: NotFound },

2,notfound.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<template>   <div class="nfback" >     <div class="nfmainback"></div>     <div class="nfmain" >       <div class="nfrgba"></div>       <div class="nf_content_text">       <h1 class="title" style="text-align: center;" data-v-bad1fafc="">路由错误</h1>       </div>     </div><!--main end-->   </div> </template> <script> export default {   name: 'LayoutNotFound',   setup() {     return {     };   }, } </script> <style scoped> :root {   --el-component-size: 40px; } .nfmain {   flex: none;   margin: 0 auto;   border-radius: 4px;   z-index: 0;   position: relative;   overflow: hidden; } </style>

三，测试效果:

胡乱填写一个不存在的路径,显示了NotFound页面的内容:

说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/10/01/vue-lu-you-cuo-wu-404-not-found-vuerouter-4-2-4/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com

四，查看vue/vue-router的版本:

liuhongdi@lhdpc:/data/vue/responsive$ npm list vue
responsive@0.1.0 /data/vue/responsive
└─┬ vue@3.3.4
  └─┬ @vue/server-renderer@3.3.4
    └── vue@3.3.4 deduped

liuhongdi@lhdpc:/data/vue/responsive/src$ npm list vue-router
responsive@0.1.0 /data/vue/responsive
└── vue-router@4.2.4