vue.js3.2.6:路由处理404报错(vue-router@4.0.11)
2023-09-14 09:01:18 时间
一,未处理404前的情况:
![](https://img2020.cnblogs.com/blog/1938691/202110/1938691-20211008160438982-1962649154.png)
因为router不存在,所以显示成了白页
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: 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
如图:
![](https://img2020.cnblogs.com/blog/1938691/202110/1938691-20211008160438992-759307000.png)
四,查看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
相关文章
- 那些年曾经没回答上来的vue面试题
- 初识 Vue
- Vue中使用formdata配合fetch使用
- vue 图片上传 图片展示 bootstrap
- Vue框架控制台Console提示Download the Vue Devtools extension....
- vue-router 多级路由redirect 重定向的问题
- vue组件化的理解_什么是前端组件化
- Vue笔记(8)
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- Vue:npm run serve 到底做了什么?
- Vue响应式依赖收集原理分析-vue高级必备
- 「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用,实用且也是组件中必会的一个知识,另外也可以实现父子组件之间通信
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- vue-pdf使用demo
- vue封装组件以及调用「建议收藏」
- Vue生成二维码_vue视频软件怎么生成二维码
- Vue的跨域解决方案
- vue中父组件传值给子组件,父组件值改变,子组件不能重新渲染[通俗易懂]
- vue国际化配置
- Vue项目骨架屏注入实践
- vue路由守卫
- VUE路由设置history模式刷新404处理
- 字节前端二面高频vue面试题整理_2023-02-24
- Vue Router前端路由
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue如何连接Redis(vue怎么连接Redis)