首页 > 其他分享> 文章详细

vue访问未定义的路由时重定向404

2022-01-18 14:59:04 阅读：163 来源： 互联网

标签：vue 重定向未定义配置 404 path import 路由

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

标签：vue,重定向,未定义,配置,404,path,import,路由
来源： https://blog.csdn.net/aaaaadddad/article/details/122559805

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue访问未定义的路由时重定向404