2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
2023-09-11 14:19:54 时间
1、路由全局守卫
在做项目的时候,遇到需要做路由跳转,但当用户输入错误url地址,或是其它非法url路由地址,我们或许会想到跳转至404页面。不管你有没有写一个404页面,当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向,redirect来解决这个问题。但实际上通过redirect是没办法更好解决这个问题的。看代码红色部分
router.beforeEach((to, from, next) => {
if (to.matched.length ===0) { //如果未匹配到路由
from.name ? next({ name:from.name }) : next('/'); //如果上级也未匹配到路由则跳转登录页面,如果上级能匹配到则转上级路由
} else {
next(); //如果匹配到正确跳转
}
});
2、重定向
有时,我们可能会输入错的 url, 或者不再存在等各种原因导致其不再能被访问,那么我们就可以对于这种情况进行重定向。 很简单,只要在路由中添加下面的代码就可以了:
//创建路由对象并配置路由规则
let router = new VueRouter({
routes:[
{path:'/',redirect:{name:"home"}}, // 重定向到主页
{name:'home',path:'/home',component:Home},
{path:'/music',component:Music},
{path:'/movie',component:Movie},
{name:'img',path:'/picture22',component:Picture},
{name:'musicDetail',path:'/musicDetail/:id/:name',component:MusicDetail},
{path:'*',component:NotFound},//全不匹配的情况下,返回404,路由按顺序从上到下,依次匹配。最后一个*能匹配全部,
]
});
或者下面这样,注意放到最后
{
path: "*",
redirect: "/"
}
即对于所有的(*代表所有)错误页面,我们都可以重定向到 "/" 中。
相关文章
- vue.js--基础 数据的双向绑定
- 【Vue+element+admin】登陆页面篇(login.vue)
- 04Vue - Vue.js 入门(用组件构建应用)
- Vue - Router 路由跳转传参(对象 / 数组)目标页面刷新后参数丢失问题解决方案
- Vue - 完美解决小数的四则运算(加减乘除)导致精度丢失问题,提供详细计算示例代码vue数据计算丢失精度
- Vue: 全局函数和变量
- Vue中使用ECharts报错echarts Uncaught (in promise) TypeError: Cannot read property ‘getAttribute‘ of null
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- vue中的跨域问题
- Vue面试题总结(1)
- vue工程化与路由router
- 单页vue路由router
- vue学习笔记九:Jquery VS Vue之遍历方法对照
- vue-router嵌套路由,默认子路由设置
- vue项目启动时自动获取ip地址
- vue-router路由元信息详解
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- Django+Vue项目学习第六篇:vue+django发送post请求,设置不同content-type,前后端如何处理参数
- Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location解决方法
- Vue开发实例(15)之动态路由
- 【VUE】vue配置Gzip压缩
- vue模板语法: 插值语法和指令语法以及v-bind指令使用