解决vue项目路径不正确,自动跳转404的问题
作者:不另外加糖
这篇文章主要介绍了解决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' }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。