一，官方文档地址:
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
说明：作者:刘宏缔 邮箱: [email protected]
四，查看vue/vue-router的版本:
liuhongdi@lhdpc:/data/vue/responsive$ npm list vue
[email protected] /data/vue/responsive
└─┬ [email protected]
└─┬ @vue/[email protected]
└── [email protected] dedupedliuhongdi@lhdpc:/data/vue/responsive/src$ npm list vue-router
[email protected] /data/vue/responsive
└── [email protected]