Vue2和Vue3中如何设置404界面

小天博客 • 05/10 22:26 • 开发 • 98 views

这篇文章主要讲解了“Vue2和Vue3中如何设置404界面”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue2和Vue3中如何设置404界面”吧！在此文件中，一般存放的都是我们的路由信息，我们经常使用path:’*’来进行捕获我们的路由，度过不存在那么我们就让它进行跳转至我们自定义的404页面。


importVuefrom'vue'
importRouterfrom'vue-router'
importHomepagefrom'@/components/Homepage'
Vue.use(Router)

exportdefaultnewRouter({
routes:[
{
path:'/',
component:Homepage,
},
{
path:'*',
component:()=>import('../views/404.vue')
}
]
})

注意：这个path一定要写在最外面。这个页面通常我们可以自定义，一般包括跳转某个页面的超链接或者就是定时多长时间进行跳转。

页面将在{{time}}秒后自动跳转首页，
您也可以点击这里跳转首页
为什么要分开说呢？因为在vue3中我们进行如下设置：


{
path:'*',
component:()=>import('../views/404.vue')
}

会产生错误，错误信息：Catch all routes (“*”) must now be defined using a param with a custom regexp.，意思就是：现在必须使用与自定义Regexp的参数定义所有路由（“*”）。那么官方是这么说的：


//planondirectlynavigatingtothenot-foundrouteusingitsname
{path:'/:pathMatch(.*)*',name:'not-found',component:NotFound},
//ifyouomitthelast`*`,the`/`characterinparamswillbeencodedwhenresolvingorpushing
{path:'/:pathMatch(.*)',name:'bad-not-found',component:NotFound},

那么我们vue2中的index.js文件中的代码就变成了如下：


...

exportdefaultnewRouter({
routes:[
...，
{
path:'/:pathMatch(.*)*',
component:()=>import('../views/404.vue')
}
//或者
{
path:'/:pathMatch(.*)',
component:()=>import('../views/404.vue')
}
]
})

感谢各位的阅读，以上就是“Vue2和Vue3中如何设置404界面”的内容了，经过本文的学习后，相信大家对Vue2和Vue3中如何设置404界面这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: SpringBoot中如何使用Servlet

今天小编给大家分享一下SpringBoot中如何使用Servlet的相关知识点，内容详细，逻辑清晰，相免费云主机域名信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。首先，我们写一个S…

免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。