本篇文章带大家进行vue学习,聊聊vue2和vue3中设置404界面的方法,希望对大家有所帮助!
vue页面中,如果跳转了不存在的路由那么,那么页面就会出现白屏状态,为了解决这个问题,我们可以自己写一个404界面,让其跳转过去。
在此文件中,一般存放的都是我们的路由信息,我们经常使用path:'*'来进行捕获我们的路由,度过不存在那么我们就让它进行跳转至我们自定义的404页面。
import Vue from 'vue' import Router from 'vue-router' import Homepage from '@/components/Homepage' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Homepage, }, { path:'*', component:()=>import('../views/404.vue') } ] })
注意:这个path一定要写在最外面。【相关推荐:、】
这个页面通常我们可以自定义,一般包括跳转某个页面的超链接或者就是定时多长时间进行跳转。
页面将在{{ time }}秒后自动跳转首页,
您也可以点击这里跳转首页
那么实现的效果就如下图所示:
404实现效果
为什么要分开说呢?因为在vue3中我们进行如下设置:
{ path:'*', component:()=>import('../views/404.vue') }
会产生错误,错误信息:Catch all routes ("*") must now be defined using a param with a custom regexp.,意思就是:现在必须使用与自定义Regexp的参数定义所有路由(“*”)。
那么官方是这么说的:
// plan on directly navigating to the not-found route using its name { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound }, // if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing { path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound },
那么我们vue2中的index.js文件中的代码就变成了如下:
... export default new Router({ routes: [ ..., { path:'/:pathMatch(.*)*', component:()=>import('../views/404.vue') } //或者 { path:'/:pathMatch(.*)', component:()=>import('../views/404.vue') } ] })
(学习视频分享:、)
以上就是聊聊Vue2和Vue3中怎么设置404界面的详细内容,更多请关注本站点其它相关文章!
本文地址:https://www.stayed.cn/item/27470
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我