Vue项目路径错误导致404，如何自动跳转解决？

本文共计402个文字，预计阅读时间需要2分钟。

目录 + Vue项目路径不正确，自动跳转404 + 第一种方法 + 第二种方法 + Vue路由判断跳转404 + Vue项目路径不正确，自动跳转404 + 第一种方法 + 使用Vue Router钩子函数beforeEach，每次路由跳转时都进行判断

目录

• 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'    }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。