我们在访问未配置的路由时,就会出现一个空白界面,如何重定向404呢,废话不多说,直接来方法。
第一种:官方路由守卫。
第二种:可以在配置路由中配置 " * " ,对未进行配置的路由进行重定向。
第一种实现方法:使用路由守卫进行。
这种方法也可以实现404跳转,但是具有一定的局限性,如果路由配置的比较多的话,使用不太方便,这里就不介绍路由守卫了,看一下官方文档就很容易理解。
第二种:可以在配置路由中配置 " * " ,对未进行配置的路由进行重定向。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let router = new VueRouter({
routes: [{
path: '/',
redirect: '/home'//重定向
}, {
path: '/home',//配置路径
component: () =>
import ('../components/home'),//按需引入
},{
path: '/404',
component: () =>
import ('../components/404')
},{
path: '*',//匹配未定义的路由
redirect: '/404'//重定向
}]
})
export default router
我在其他博客看到有的说需要放在所有配置路由的最后一个,但是我试了一下放在其他位置也是可以重定向到404页面的,可能是我没有发现到bug吧,那就放最后面也是一样的。
以上便是重定向404页面的方法,可以点击我的头像查看更多内容。