解决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'
   }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • VUE页面中通过双击实现复制表格中内容的示例代码

    VUE页面中通过双击实现复制表格中内容的示例代码

    这篇文章主要介绍了VUE页面中通过双击实现复制表格中内容,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • Vue拖拽组件开发实例详解

    Vue拖拽组件开发实例详解

    本文重点给大家介绍Vue拖拽组件开发实例,拖拽的原理是手指在移动的过程中,实时改变元素的位置即top和left值,使元素随着手指的移动而移动。对实例代码感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • 不依任何赖第三方,单纯用vue实现Tree 树形控件的案例

    不依任何赖第三方,单纯用vue实现Tree 树形控件的案例

    这篇文章主要介绍了不依任何赖第三方,单纯用vue实现Tree 树形控件的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue之封装公用变量以及实现方式

    Vue之封装公用变量以及实现方式

    这篇文章主要介绍了Vue之封装公用变量以及实现方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue中使用jeecg进行前后端联调方式

    vue中使用jeecg进行前后端联调方式

    这篇文章主要介绍了vue中使用jeecg进行前后端联调方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 关于element-ui日期时间选择器选不中12小时以后的时间详解

    关于element-ui日期时间选择器选不中12小时以后的时间详解

    在之前做个一个组件页面中,引用了element-ui组件的日期选择器,遇到的一个小问题,下面这篇文章主要给大家介绍了关于element-ui日期时间选择器选不中12小时以后时间的相关资料,需要的朋友可以参考下
    2022-08-08
  • vue如何使用watch监听指定数据的变化

    vue如何使用watch监听指定数据的变化

    这篇文章主要介绍了vue如何使用watch监听指定数据的变化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3计算属性和异步计算属性方式

    Vue3计算属性和异步计算属性方式

    这篇文章主要介绍了Vue3计算属性和异步计算属性方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue工程如何为组件自动注入全局样式文件

    vue工程如何为组件自动注入全局样式文件

    这篇文章主要介绍了vue工程如何为组件自动注入全局样式文件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue router重定向redirect如何传值问题

    Vue router重定向redirect如何传值问题

    这篇文章主要介绍了Vue router重定向redirect如何传值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论