Vue.js路由在刷新时发送到404
Vue.js是一种流行的JavaScript前端开发框架，它提供了一种组件化的方式来构建Web应用程序。Vue.js路由是Vue.js框架的一部分，它用于管理应用程序的不同页面之间的导航。
当在Vue.js应用程序中刷新页面时，浏览器会向服务器发送请求，但是由于单页应用的特性，服务器无法识别刷新后的URL，因此会返回404错误。为了解决这个问题，可以使用后端服务器的重定向功能或者前端路由的历史模式。
- 后端重定向：可以配置后端服务器，使其对所有请求返回应用程序的主页。这样，当页面刷新时，服务器会始终返回应用程序的主页，然后Vue.js路由会根据URL来加载正确的组件和数据。
- 前端路由的历史模式：Vue.js路由提供了一种历史模式，可以通过将VueRouter的mode设置为"history"来启用。在这种模式下，Vue.js会使用HTML5的History API来管理路由，使得在刷新页面时，URL会被正确地映射到对应的组件和数据。
Vue.js路由的优势：
- 单页应用：Vue.js路由支持构建单页应用，这样可以提供更好的用户体验，减少页面加载时间。
- 前端路由管理：Vue.js路由可以在前端管理页面之间的导航，避免了每次导航都向服务器发送请求。
- 组件化开发：Vue.js路由充分利用了Vue.js框架的组件化开发特性，可以将页面拆分成多个组件，使得代码更加可维护和可复用。
Vue.js路由的应用场景：
- 多页面应用：Vue.js路由可以用于构建多页面应用，每个页面对应一个Vue组件。
- 单页面应用：Vue.js路由最适合构建单页面应用，通过组件切换实现不同页面之间的导航。
- 前后端分离应用：Vue.js路由可以与后端API进行集成，实现前后端分离的应用架构。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云服务器（CVM）：提供可扩展的云服务器，用于部署和运行Vue.js应用程序。链接：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：用于存储Vue.js应用程序的静态资源文件，如图片、CSS和JavaScript文件等。链接：https://cloud.tencent.com/product/cos
- 腾讯云CDN：用于加速Vue.js应用程序的访问速度，提高用户体验。链接：https://cloud.tencent.com/product/cdn
请注意，以上推荐的腾讯云产品仅供参考，并非唯一选择，根据具体需求和实际情况，可以选择适合的云计算服务商和产品。
相关·内容
但是当你打开那个页面(例如/aboutUs)并刷新它，或者简单地复制url，粘贴它并点击Enter它会显示页面没有找到。如何修复它？{path: '/', component: firstPage}, {path: '/404', component: pageNotFound},
{path: '*', redirect: &#
浏览 8提问于2020-01-16得票数 0
我已经启动了一个Vue.js应用程序，并使用Amazon和Cloudflare运行。404 Not Found
Message: The specified key6514F8A1F4C29235
HostId: +BVrPLJSGdzSYogzWZ4GMBXkgkdSJWRVJVhc
浏览 13提问于2017-03-29得票数 34
回答已采纳
我正在使用Laravel5.5和Vue.js 2.0example.com/items当我直接打开这个url example.com/items时，它只显示我从Laravel获得的json响应，而没有在html (Vue.js)中创建任何视图。items = Items::all(); return response()->
浏览 1提问于2018-01-19得票数 0
回答已采纳
angular 5作为前端和后端，在go中作为Golang和written当页面被刷新时，请求被发送到服务器，这导致页面未找到404错误，因为请求绕过了Angular中的路由器。例如:在路由中，如果我们调用/login，我们可以显示一个页面，但如果刷新相同的页面，它将显示为页面未找到404。
浏览 3提问于2017-12-21得票数 0
回答已采纳
1回答
它在本地运行很好，但当我在码头运行时。它可以到达abc.xyz，从那里我可以通过点击主页实现Gotoabc.xyz/仪表板、abc.xyz/browseIdea。但是，当我像abc.xyz/仪表板那样直接点击url时，它显示的是404没有找到。为了解决这个问题，我添加了哈希路由。imports: [RouterModule.forRoot(routes,{useHash : true})],})
因
浏览 0提问于2019-02-27得票数 0
1回答
我有一个导出为静态站点的NextJs项目，托管在Digital Ocean的应用程序平台上，使用next/router处理路由。
问题是，在基路由"/“之外的任何路由上刷新都会返回404。其他答案提到在DO的应用程序规范中使用error_document或catchall_document作为回退文件，但其他路由在刷新时仍然是404，
浏览 2提问于2021-03-07得票数 0
如何使用history.pushState配置服务器，使浏览器刷新和浏览器URL不生成404？8080/detail/13<!head> <met
浏览 4提问于2016-10-19得票数 5
回答已采纳
我目前正在开发一个具有Ruby on Rails后端和Vue.js前端的应用程序。这是一个单页面应用程序。我正在使用webpacker gem来构建我的主js文件。我已经添加了vue-router和一些前端路由。我可以使用<router-link>导航，它可以正确地呈现适当的组件。我不明白的是，我如何设置我的前端路由，这样别人就可以直接导航到一个url，而不会碰到我的rails路由。例如，如果我输入/sample-route，我希望进入我的Vue.js路由，而不是r
浏览 32提问于2019-06-14得票数 1
回答已采纳
我的应用程序在子目录上运行但是，当我在http://localhost:8080/admin_suffix/subdirectory上点击reload时，我会得到一个错误消息"Cannot get /admin_suffix/subdir
浏览 11提问于2018-09-09得票数 7
3回答
空值
、、
我想把csrf作为元标签添加到我的laravel web应用程序中-但是当我浏览它的时候，这个值是空的-我也尝试过添加登录表单-作为{!! csrf_filed() !!}或
<input type="hidden" name="_token" value="{{ csrf_tok
浏览 5提问于2015-12-31得票数 1
回答已采纳
当点击火狐地址栏和按回车时，Vue应用程序不会刷新。Vue.js应用程序使用Vue路由器。我的url结构是：
浏览 3提问于2019-06-27得票数 0
回答已采纳
当我刷新我的网站时，我得到一个404。这是与Angular2，类型记录和火基。。当我在本地刷新时，这种情况不会发生。
我是否遗漏了任何路由设置或火基设置？
浏览 0提问于2015-12-22得票数 37
回答已采纳
尝试使用历史记录模式在vue.js中从vue.js中删除哈希符号。这样做的缺点是，当页面被刷新/重新访问时，就会出现404 Not。有一个文件从网站关于历史模式和修复它，但我有困难，理解它，对不起。我想要的是从代码中删除历史模式，同时从url中删除散列符号并修复404错误。
我将提供下面的代码，从index.js，网络有。404错误修复时，页面被刷新/重新访问，哈希符号被从URL中删除。
浏览 9提问于2021-12-15得票数 1
1回答
它运行良好，但唯一的问题是，当我试图刷新第二级或第三级路由页面时，它会在控制台中显示一条错误消息，声明：比如，我还为和定义了类似的链接，这些链接都是页面刷新时出现的错误。
浏览 1提问于2018-03-08得票数 2
回答已采纳
在重新加载单个页面应用程序时，我希望url正确加载，而不是抛出404错误。使用Laravel5.6，Vue.js 2.6，& MAMP。我尝试了下面的代码，但是，基于URL是什么，我在相同的欢迎视图中加载不同的app.js文件。由于这种结构，此解决方案不起作用：我想用我的vue路由器进行刷新工作。任何建议，无论是与我的路由/web.php文
浏览 0提问于2019-06-23得票数 0
为了澄清起见，这个问题与"Error 404“页面在缺少.htaccess重定向时未找到的问题无关。它是一个在Nginx上托管的角5应用程序，正常的角度路由工作良好，页面刷新页面负载就像预期的那样。但是如果您检查Chrome developer tool -> Network tab -> filtered with "Doc"，可以看到该路由的404状态。在刷新时<
浏览 1提问于2018-10-11得票数 0
1回答
例如mydomain.com/react-project/对于这个.htaccess文件，我想重定向浏览器以响应项目index.html文件。但没起作用。
浏览 7提问于2022-03-31得票数 1
1回答
我将我的角应用程序部署在使用ng build --prod --base-href=/myapp/构建的tomcat中，当我试图使用http://localhost:8083/myapp/home使用[routerLink]="['/home']访问特定路由时，它工作得很好，但是当尝试刷新页面或从浏览器直接访问http://localhost:8083/myapp/home时<
浏览 3提问于2020-10-22得票数 1
回答已采纳
2回答
我使用react路由器dom进行前端路由，但每当我刷新页面或访问任何不是根目录或'/‘的URL时，服务器都会以404响应，在我运行npm build之前，即使我刷新了页面，路由器也工作得很好。
浏览 33提问于2021-06-25得票数 0
回答已采纳
当我在我的单页面应用程序中从浏览器刷新页面时，我得到了404异常。我使用的是Spring和Hibernate，我想通过点击刷新来重新加载相同的页面。
浏览 0提问于2015-07-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
