我们在访问未配置的路由时,就会出现一个空白界面,如何重定向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页面的方法,可以点击我的头像查看更多内容。

Logo

前往低代码交流专区

更多推荐