解决Vue history模式下路由跳转时页面404问题

最新推荐文章于 2024-05-30 20:32:59 发布
最新推荐文章于 2024-05-30 20:32:59 发布
阅读量3.1k 收藏 2
点赞数
分类专栏： VUE 文章标签： vue 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwhy123/article/details/110001265
版权
在Vue的history模式下，直接访问特定路由可能导致404错误。为避免此问题，需要后端进行配置，确保所有未匹配的URL都返回index.html。Apache和nginx等服务器的配置示例在文中给出。
摘要由CSDN通过智能技术生成

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

后端配置例子

注意：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 Vue CLI 的publicPath 选项 和相关的 router base property。你还需要把下列示例中的根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/替换掉 RewriteBase /)。

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ -
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[vue-router] history模式下路同无法跳转
qq893182474的博客
03-07 5475
本地dev运行和build-nginx运行，vant的样式异常 和 组件van-popup 包 van-cascader 的弹框显示不出内容！ 出现此问题的上一步是因为项目中配置的cdn无法访问，导致界面加载混乱，所以将cdn的引入屏蔽。但是本地开发时，屏蔽了就导致vue-router报错，点击按钮跳转子路由时无反应，报错如下： 第一次突破，发现如果把屏蔽的cdn打开，就能正常点击了。 问题，但是这是做的移动端网站，手机上加载图书入库时，要选库位（van-popup 包 van-cascader
Vue路由history模式解决404问题的几种方法
12-10
问题背景： vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成 如下：http://localhost:8080/bank/page/count 这样的了； 不过history的这种模式需要后台配置支持。比如：当我们进行项目的主页的时候
vue history模式路由跳转空白
qq_39650208的博客
10-14 1733
今天遇到一个问题，就是在写大屏路由跳转时，遇到的问题，两个vue文件跳转，在一个vue文件里面写了这样的代码： this.$router.push({ name: 'infoRecord', query: { planId: item.id, sectionId: this.id, sitename: localStorage.siteName
vue路由从入门到进阶 --- 路由重定向与404等问题
最新发布
共同学习，共同成长
05-30 1207
本文讲解vue路由的【路由404问题】【路由模式设置】【路由重定向】等内容，并结合具体案例让小伙伴们深入理解 ，彻底掌握！
vue路由history模式404问题
青春正在燃烧的博客
12-21 237
1.vue路由使用history部署到服务器后发现回车或者刷新网页404 解决方法： nginx配置文件加入 try_files $uri $uri/ /index.html last; 如：
vite vue3 下配置 history 模式路由+解决chrome94解决私有网络请求
热门推荐
pakchoily的博客
06-08 1万+
vite 下，打包后采用history模式详解
部署问题-Vue Router在history模式下刷新页面404问题
yaoson的博客
09-21 3496
（2）History：原理是利用了h5的Interface 中的pushState()方法和replaceState()方法，它们提供了对浏览器历史记录进行修改的功能，但当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。在正式服务器中，将本文中的相应解决问题的代码配置到Nginx下配置SSL证书的443端口的serve下面；（1）SSL证书：（标记有“需要修改”字样的地方，是需要替换成你自己的配置）（标记有“需要修改”字样的地方，是需要替换成你自己的配置）请根据当前环境配置；
VUE的history模式下除了index外其他路由404报错解决办法
12-10
我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我
详解Vue路由History mode模式中页面无法渲染的原因及解决
08-29
在本文中，我们将深入探讨 History 模式的细节，以及在使用过程中遇到的页面无法渲染和 404 错误的问题及其解决方案。 1. Vue 路由 History 模式： 在 Hash 模式下，URL 中会包含一个 "#" 符号，例如 `...
解决vue+router路由跳转不起作用的一项原因
11-20
总结来说，当遇到Vue Router在`history`模式下路由跳转不起作用的问题时，除了确保在路由配置中添加`mode: 'history'`之外，还需要在服务器端进行适当的配置，以处理所有的URL请求。通过使用`connect-history-api-...
vue多页面项目中路由使用history模式的方法
10-16
主要介绍了vue多页面项目中路由如何使用history模式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue单页及多页应用全局配置404页面实践记录
08-27
在前后端分离的现代Web应用中，前端负责处理路由跳转和页面渲染。Vue.js作为一个流行的前端框架，常用于构建单页（Single-Page Application，SPA）和多页（Multi-Page Application，MPA）应用。本文将详细介绍如何在...
hash模式和history模式实现路由跳转
nknmn
08-20 2464
hash模式和history模式实现路由跳转
node express 启动 vue项目 路由为 history 模式路由跳转问题
yun_hou的博客
07-12 1743
在express + vue 项目开发过程中，vue-router 设置 mode 为 history 时，页面刷新或者输入路径时，会直接访问node服务，而不会对应进入vue页面，在vue官网中已经给出了解决方法。但是有的时候自己配置总会出现问题，有一种简单的解决办法，就是利用connect-history-api-fallback 插件 vue export default new ...
关于vue history 模式下刷新页面路径404 或跳转到主页问题的解决思路
MoonLight20100的专栏
04-21 2318
闲言少叙，直奔主题了，使用过vue 的都有这么问题，开发时候一直爽，一上生产就懵逼，测试环境和生产是不一样的，注定了，在生产环境下vue 的路径是无法保存的 解决思路1 千篇一律的nginx找不到路径回首页，搜到了吧，一定搜得到，但是实在无法接受 我的解题思路如下： vue 不是找不到路径么 那么我把路径改为参数不就可以了？ nginx需要一定基础了 这里必须用反向代理 正向的会直接...
介绍Vue router的history模式以及如何配置history模式
m0_62396648的博客
07-08 7967
history模式使用浏览器的history API来管理路由状态，而不是依赖于URL中的哈希。在history模式下，URL看起来更加整洁，没有#符号。例如，history模式可以在不刷新整个页面的情况下，通过改变URL来切换页面，实现更加流畅的用户体验。
【JavaScript】关于解决JS 计算精度问题（toFixed, Math.round, 运算表达式）
老司机的后备箱
05-11 1435
前言 最近在做一个ERP的项目，里面涉及到了很多的计算，尤其特别是有很多关于浮点数的计算，然后就碰到了下面的问题。 问题描述 & 解决方案 1.使用toFixed or Math.round进行四舍五入&保留两位小数会有5不进1的情况 举个🌰，我在开发的过程中遇到了321201.595这个数字… 然后我想对他进行四舍五入 & 保留两位小数，一开始不太了解 toFixed有那么多坑，所以直接用的.toFixed(2)，结果如下： const number = 321201.595; c
Vue 项目布署后，刷新页面（或跳转页面）出现 404 解决办法
在人间负债^
08-23 5438
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们可以发现，变的始终是内容，而容器还是那个容器。
vue3项目history模式路由跳转后回到页面顶部
05-24
可以在路由切换时，监听路由变化，然后使用 `window.scrollTo()` 方法将页面滚动到顶部。 具体实现方法如下： 1. 在组件中引入 `reactive` 和 `onMounted` 两个函数： ```javascript import { reactive, onMounted } from 'vue' ``` 2. 在组件中定义一个存储页面滚动位置的对象： ```javascript const scrollPosition = reactive({ x: 0, y: 0 }) ``` 3. 在组件中使用 `onMounted` 函数，监听页面加载完成后的事件，记录当前页面的滚动位置： ```javascript onMounted(() => { scrollPosition.x = window.pageXOffset scrollPosition.y = window.pageYOffset }) ``` 4. 在组件中使用 `$router.afterEach()` 函数，监听路由变化后的事件，将页面滚动到顶部： ```javascript $router.afterEach(() => { window.scrollTo(0, 0) }) ``` 5. 在组件中使用 `$nextTick()` 函数，等待页面渲染完成后，将页面滚动到之前的位置： ```javascript $nextTick(() => { window.scrollTo(scrollPosition.x, scrollPosition.y) }) ``` 完整代码如下： ```javascript <template> <div> // 组件内容 </div> </template> <script> import { reactive, onMounted } from 'vue' export default { name: 'MyComponent', setup() { const scrollPosition = reactive({ x: 0, y: 0 }) onMounted(() => { scrollPosition.x = window.pageXOffset scrollPosition.y = window.pageYOffset }) $router.afterEach(() => { window.scrollTo(0, 0) }) $nextTick(() => { window.scrollTo(scrollPosition.x, scrollPosition.y) }) return {} } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值