![Vue.js 3企业级项目开发实战(微课视频版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/500/52842500/b_52842500.jpg)
上QQ阅读APP看书,第一时间看更新
2.5 捕获404路由
![](https://epubservercos.yuewen.com/313864/31398258607654606/epubprivate/OEBPS/Images/Figure-P23_74006.jpg?sign=1738886661-9UW5jzdcQ5qFxqiaUPVa45JAF9YaTCcV-0-6c51033e5f38f0c8aa555c6dd45f5f5d)
在路由匹配规则中,通过path属性设置路由地址,目前项目中只设置了一个路由地址,当访问/home时,加载HelloWorld组件,但是用户输入路由地址时可能存在输入错误的情况,为了提升用户体验,当输入一个不存在的路由地址时,应该跳转到404提示页面,实现步骤如下。
(1)新建404组件。在src目录新建views文件夹,用于保存项目中所用到的页面,在views文件夹下新建404.vue文件,示例代码如下。
![](https://epubservercos.yuewen.com/313864/31398258607654606/epubprivate/OEBPS/Images/Figure-P24_125433.jpg?sign=1738886661-wbpDyQQ7NZks44aYJa3K7GrcdvTNAv9Q-0-cd8ebeed483f83f02942a036f71466e2)
(2)新建路由匹配规则,示例代码如下。
![](https://epubservercos.yuewen.com/313864/31398258607654606/epubprivate/OEBPS/Images/Figure-P24_125434.jpg?sign=1738886661-Xov7SrimQ2RY505lvlKAvpLDIFKJftwa-0-0f0b51a47d085ccba526eb94a54ffe41)
将404路由匹配规则设置完成之后,用户在浏览器中只要输入了不存在的路由地址,就会跳转到404.vue组件,最后使用Element Plus提供的result组件美化404页面,404.vue组件的示例代码如下。
![](https://epubservercos.yuewen.com/313864/31398258607654606/epubprivate/OEBPS/Images/Figure-P24_125435.jpg?sign=1738886661-r7EFg1AwgQvpPPesTGAtwxcUZsJ2c07k-0-49abad6edd0ac445dabdd2783ba8eba4)
在浏览器中输入一个不存在的路由地址,展示效果如图2-3所示。
![](https://epubservercos.yuewen.com/313864/31398258607654606/epubprivate/OEBPS/Images/Figure-P25_74191.jpg?sign=1738886661-8OvbiR26GmUxJ4lO8ik3RrbwKMUFgrG1-0-a29961fc883b71a019c411024c00b57e)
图2-3