解决Vue项目路由跳转404问题

最新推荐文章于 2024-05-30 20:32:59 发布
最新推荐文章于 2024-05-30 20:32:59 发布
阅读量5.1k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43259821/article/details/104383079
版权

参考原文链接

问题描述

单页Vue应用部署到Tomcat服务器根目录后，除了重定向首页以外皆出现“404”状况。

解决方法

在Tomcat的vue项目文件夹（即webapps/ROOT）中新建一个文件夹WEB-INF，里面新建web.xml，添加以下内容：

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi=
最低0.47元/天 解锁文章
面目不露骨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue history模式下路由跳转时页面404问题
FUTURE的博客
11-23 3140
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！ 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。 所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面
解决vue单页路由跳转后scrollTop的问题
10-18
本文将详细介绍如何解决Vue单页路由跳转后scrollTop的问题。 首先，这个问题通常是由于浏览器的默认行为导致的。当你通过Vue Router进行路由跳转时，浏览器会记住之前页面的滚动位置。为了解决这个问题，我们可以...
vue2.0项目实现路由跳转的方法详解
08-27
主要介绍了vue2.0项目实现路由跳转的详细方法,非常不错，具有一定的参考借鉴借鉴价值，需要的朋友可以参考下
vue路由从入门到进阶 --- 路由重定向与404等问题
最新发布
前端菜鸟的自我修养
05-30 1173
本文讲解vue路由的【路由404问题】【路由模式设置】【路由重定向】等内容，并结合具体案例让小伙伴们深入理解 ，彻底掌握！
proxy vue 第二个配置404_解决vuejs应用在nginx非根目录下部署时访问404的问题
weixin_39940688的博客
12-22 291
以往部署vuejs应用都是直接在nginx的location为/下直接部署，这次遇到要将vue应用部署在/vuejs-admin的非根下，使用以往部署方案直接访问就会404，这时修改步骤如下：1、修改项目router配置，如下：这里一是要修改router模式为history，另一个就是修改base地址为要访问的/vuejs-admin的地址，注意前后都有斜线2、修改build下静态资源路径前缀同上...
解决vue项目部署到服务器跳转子页面之后刷新报404
m0_61061937的博客
05-31 867
然后执行nginx.exe -s reload 这个是重新启动nginx，然后在浏览器输入地址跳转到子页面进行刷新看是否报404 ，如果还未解决重启电脑一下，并运行nginx就好了。如果跳转到子页面刷新报404说明你的项目路由是用的history模式，此时需要打开你的nginx 找到conf文件夹下的nginx.conf。然后找到server 这个位置，框红线的地方是需要添加的内容。
tomcat 部署vue 错误页面重定向解决
atongmu09的博客
01-16 1226
1. 在vue 项目根目录下创建名为WEB-INF的文件目录 2.在WEB-INF目录下创建web.xml文件 3.编辑web.xml文件 &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www....
Vue上线后路由404解决办法
qq_41913447的博客
01-08 439
【代码】Vue上线后路由404解决办法。
vue相同路由跳转强制刷新该路由组件操作
10-14
在Vue.js应用中，路由是...在进行路由跳转和组件刷新时，理解Vue Router的工作原理至关重要，这可以帮助我们编写出更加灵活且可维护的代码。同时，遵循最佳实践和避免常见错误，如路由命名冲突，也能提高应用的质量。
Vue路由跳转问题记录详解
08-30
在本文中，我们将深入探讨一个具体的Vue路由跳转问题，以及如何解决这个问题。 首先，我们要了解Vue Router的基本结构。在示例中，我们看到这样的路由配置： ```javascript { path: '/tab', component: Tab, ...
Vue项目上线后刷新报错404问题（apache，nginx，tomcat）
hellojoy的博客
04-10 1725
https://www.cnblogs.com/sxshaolong/p/10219527.html 一、 Vue项目打包发布apache报错： route，配置一个覆盖所有的路由情况 1、需要修改router/index.js中new Router配置，加一个base: '/htcm_front/', 它指定应用的基路径，该应用是服务于localhost/htcm_front路径下...
vue实现权限控制路由(vue-router 动态添加路由)
10-16
今天小编就为大家分享一篇vue实现权限控制路由(vue-router 动态添加路由)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
10-16
主要介绍了使用VueRouter的addRoutes方法实现动态添加用户的权限路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue嵌套路由与404重定向实现方法分析
10-18
主要介绍了vue嵌套路由与404重定向实现方法,结合实例形式分析了vue.js嵌套路由与404重定向的概念、原理、实现步骤与相关操作技巧,需要的朋友可以参考下
Vue部署到Tomcat时遇到的问题
yuxuanji99的博客
09-03 2801
Vue配置到Tomcat中遇到的问题
Vue打包的项目部署服务器之后，其他路由刷新页面时显示404
豪先生的博客
06-16 2538
有的朋友就会有疑虑，为什么在vue项目开发的时候不会出现这种问题呢？因为在vue项目开发的时候是访问自己的8080服务器,后端有进行处理，在刷新界面后找不到相对路径时，会重新渲染index.html界面，把路由的控制权交给前端，然后前端负责路由的匹配，在找到符合/test/123 这种格式的路由后,就会匹配成功。vue router mode 默认为hsas，这样的url中会带有#，如果改成mode:'history'就能去掉#号，也可以正常访问，但是再次率先你页面就会出现404。
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢？
做笔记\记录遇到的程序bug
10-15 356
主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享？踩过的坑没必要让别人在再踩，自己复盘也能加深记忆。利己利人、所谓双赢。
vue打包之后的项目在nginx的部署404,以及无法跳转路由问题
qq_39330397的博客
06-29 6432
常见的使用场景是在单页应用程序（SPA）中，将所有请求都指向主页（如 index.html），然后由前端路由进行处理。这个配置将 /redirect-me 路径的请求重定向到 http://example.com/new-location，并使用 permanent 参数表示永久重定向。你需要将 /path/to/your/static/files 替换为实际的静态文件路径。这个配置将把所有 /old-path/ 开头的请求重写到 /new-path/，并将原始路径中的内容保留。# 指定静态文件的根目录。
vue配置动态路由跳转报404页面解决方案，3个步骤实现，1分钟解决
热门推荐
凌晨冲锋者的博客
11-17 1万+
问题： 我们成功配置动态路由，点导航栏没问题，一刷新和输入地址 就出问题跳404页面！ 原因： addRoutes动态添加路由还没完成，页面就从静态找了。 路由生命周期 静态→动态，404是放到静态的所有老报。 解决： 将404路由也动态添加进去！ 演示： 这是我报bug的样子 咱们把404路由删了，用一个变量代替 操作步骤一： 操作步骤二： 操作步骤三： 在APP使用created()函数是为了刷新时候调用第二个步骤的方法。 ...
vue3 路由跳转404
09-16
在Vue 3中，路由跳转遇到404错误的情况可以通过以下方式处理。首先，需要在路由配置中定义一个404页面，用于显示路由未匹配到的情况。可以使用`<router-view/>`标签在主组件中渲染404页面。另外，还可以通过路由导航守卫的`beforeEach`方法来判断路由是否存在，如果不存在则跳转到404页面。 代码示例： ```javascript // 路由配置 const routes = [ // 其他路由配置... { path: '/404', name: '404', component: () => import('../views/NotFound.vue') }, { path: '/:catchAll(.*)', redirect: '/404' } ]; // 路由实例化 const router = createRouter({ history: createWebHistory(), routes }); // 路由导航守卫 router.beforeEach((to, from, next) => { if (to.matched.length === 0) { next('/404'); } else { next(); } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值