iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >解决vue项目路径不正确,自动跳转404的问题
  • 845
分享到

解决vue项目路径不正确,自动跳转404的问题

2024-04-02 19:04:59 845人浏览 安东尼
摘要

目录Vue项目路径不正确,自动跳转404第一种方法第二种vue路由判断跳转404页面vue项目路径不正确,自动跳转404 第一种方法 使用vuerouter钩子函数beforeEac

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: 解决vue项目路径不正确,自动跳转404的问题

本文链接: https://www.lsjlt.com/news/168959.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 解决vue项目路径不正确,自动跳转404的问题
    目录vue项目路径不正确,自动跳转404第一种方法第二种vue路由判断跳转404页面vue项目路径不正确,自动跳转404 第一种方法 使用vuerouter钩子函数beforeEac...
    99+
    2024-04-02
  • vue项目中路由跳转页面不变问题及解决
    目录vue中路由跳转页面不变问题解决方法路由跳转页面不刷新、this.$router.go(-1)不生效解决思路vue中路由跳转页面不变 问题 今天在开发vue移动端项目的过程中发现...
    99+
    2022-11-13
    vue路由跳转 路由跳转页面不变 vue项目路由跳转
  • vue-router解决相同路径跳转报错的问题
    目录vue-router解决相同路径跳转报错vue常见错误解决总结vue-router解决相同路径跳转报错 刚写完一个vue的项目,现在总结和记录下项目中遇到的问题,加强自己,并且分...
    99+
    2023-05-14
    vue-router相同路径跳转 vue-router路径跳转报错 vue-router路径跳转
  • 解决Vuepress码云部署及自动跳转404的问题
    目录Vuepress码云部署及自动跳转404介绍部署GitHub 页面推到你仓库的的 gh-page 分支码云页面-Gitee PagesVuepress的简单使用安装Vuepres...
    99+
    2024-04-02
  • vue项目之webpack打包静态资源路径不准确的问题
    目录webpack打包静态资源路径不准确问题静态资源找不到如js文件图片找不到webpack中的静态资源处理Webpacked 资源资源处理规则在JavaScript里获取资源路径&...
    99+
    2024-04-02
  • vue-router怎么解决相同路径跳转报错问题
    这篇“vue-router怎么解决相同路径跳转报错问题”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue-router怎么...
    99+
    2023-07-05
  • Vue项目中v-bind动态绑定src路径不成功问题及解决
    目录v-bind动态绑定src路径不成功解决方案 1解决方案 2解决方案 3vue踩坑--动态v-for图片路径问题问题所在解决办法实现代码v-bind动态绑定src路径不成功 问题...
    99+
    2024-04-02
  • 如何解决vue项目使用font-awesome,build后路径的问题
    这篇文章主要介绍如何解决vue项目使用font-awesome,build后路径的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!问题: 项目在本地run情况下显示正常,在buil...
    99+
    2024-04-02
  • 如何解决vue打包项目后刷新404的问题
    这篇文章主要介绍了如何解决vue打包项目后刷新404的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。vue打包项目后刷新404的问题Ng...
    99+
    2024-04-02
  • vue项目打包部署后默认路由不正确的解决方案
    目录打包部署后默认路由不正确问题描述解决方案vue打包后路径不对对于背景图片不显示的问题动画无法运行小图标没了打包部署后默认路由不正确 问题描述 vue项目本地开发的时候默认路由没问...
    99+
    2024-04-02
  • vue项目打包部署后默认路由不正确怎么解决
    本篇内容介绍了“vue项目打包部署后默认路由不正确怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!打包部署后默认路由不正确问题描述vu...
    99+
    2023-06-30
  • vue路由跳转了但界面不显示的问题及解决
    目录路由跳转了但界面不显示路由明明配置好了页面还是不显示路由跳转了但界面不显示 没有在父路由加上router-view,加上下面的代码即可。 <!-- 路由匹配到的组件将显示在...
    99+
    2024-04-02
  • 如何解决Vue路由this.route.push跳转页面不刷新的问题
    这篇文章主要讲解了“如何解决Vue路由this.route.push跳转页面不刷新的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决Vue路由this.route.push跳转页面...
    99+
    2023-06-20
  • vue跳转同一路由报错的问题及解决
    目录vue跳转同一路由报错编程式路由跳转多次点击报错问题问题分析解决方法总结vue跳转同一路由报错 vue中,如果跳转同一个页面路由,虽不会影响功能,但是会报错 原因:路由的pus...
    99+
    2023-05-14
    vue跳转同一路由报错 vue跳转路由报错 vue跳转路由
  • vue项目中使用axios遇到的相对路径和绝对路径问题怎么解决
    这篇文章主要讲解了“vue项目中使用axios遇到的相对路径和绝对路径问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue项目中使用axios遇到的相对路径和绝对路径问题怎么解决...
    99+
    2023-06-30
  • 如何解决vue-cli项目webpack打包后iconfont文件路径的问题
    这篇文章主要介绍了如何解决vue-cli项目webpack打包后iconfont文件路径的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。...
    99+
    2024-04-02
  • Vue路由自动添加#的问题及解决
    目录Vue路由自动添加#Vue路由去除 链接 / 前面的 #Vue路由自动添加# 在使用VueRouter时,配置了几个路由规则 尝试在浏览器中输入路由地址(/order,/per...
    99+
    2024-04-02
  • Vue项目中v-bind动态绑定src路径不成功怎么解决
    这篇文章主要介绍了Vue项目中v-bind动态绑定src路径不成功怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue项目中v-bind动态绑定src路径不成功怎么解决文章都会有所收获,下面我们一起来看...
    99+
    2023-06-29
  • vue项目history模式下部署子路由跳转失败的解决
    目录history模式下子路由跳转失败使用history跳转路由不能跳转history模式下子路由跳转失败 问题描述:只有部分路由跳转正常刷新也不会白屏,部分路由出现跳转正常,刷新却...
    99+
    2024-04-02
  • 如何解决springboot项目启动但是访问报404错误的问题
    这篇文章将为大家详细讲解有关如何解决springboot项目启动但是访问报404错误的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。springboot项目启动,访问报404错误在做一个springb...
    99+
    2023-06-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作