解决vue项目路径不正确,自动跳转404的问题
更新时间:2022年10月09日 08:38:00 作者:不另外加糖
这篇文章主要介绍了解决vue项目路径不正确,自动跳转404的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue项目路径不正确,自动跳转404
第一种方法
使用vuerouter钩子函数beforeEach,每次进行路由跳转时都进行判断,若页面不存在就跳转到404页面。
import Error from ' ' const router = new Router({ routes:[ name: 'error', path: '/error', component: Error ] } //beforeEach每次进行路由跳转时都会执行 router.beforeEach((to,from,next){ if(to.matched.length === 0){ from.path ? next({name: from.name}) : next('/error') }else{ next() } }) export default router
第二种
redirect重定向
{ path: '/404', component: () => import('@/views/error-page/404'), hidden: true }, //这个*匹配必须放在最后,将改路由配置放到所有路由的配置信息的最后,否则会其他路由path匹配造成影响。 { path: '*', redirect: '/404', hidden: true }
vue路由判断跳转404页面
beforeEach函数 这是路由跳转前处理的函数
import PageNotFound from '@/views/pages/404.vue' Vue.use(Router) const routes=[ { path: '*', name: 'PageNotFound', component: PageNotFound, }, ] const router = new Router({ mode: 'history', routes: routes }) router.beforeEach((to, from, next) => { // 从其他地方访问是否有这个地址 if(to.matched.length == 0){ from.path ? next({name: from.name}) : next('*') } next(); });
第二种方法就是重定向地址 同上
修改routes中的地址
{ path: '/404', name: 'PageNotFound', component: PageNotFound, }, { path:'*', redirect:'/404' }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
关于element-ui日期时间选择器选不中12小时以后的时间详解
在之前做个一个组件页面中,引用了element-ui组件的日期选择器,遇到的一个小问题,下面这篇文章主要给大家介绍了关于element-ui日期时间选择器选不中12小时以后时间的相关资料,需要的朋友可以参考下2022-08-08
最新评论