Vue下路由History mode 出现404,无法正常刷新
在History mode下,如果直接通过地址栏访问路径,那么会出现404错误,这是因为这是单页应用(废话)…其实是因为调用了history.pushState API 所以所有的跳转之类的操作都是通过router来实现的,解决这个问题很简单,只需要在后台配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。具体配置如下:
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
try_files $uri $uri/ /index.html;
}
参考:https://blog.csdn.net/xjlinme/article/details/74783887
Vue下路由History mode 出现404,无法正常刷新的更多相关文章
- Vue下路由History mode导致页面无法渲染的原因
用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件( ...
- vue react 路由history模式刷新404问题解决方案
vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...
- 【thinkphp 5 在nginx 环境下路由无法生效(404 500错误 )的解决方法】
非常惭愧的说,由于之前一直使用的是windowservice,安装apache来进行服务器布置的,这种方式也是最简单最直接的方式, 但是由于php的服务大多都是linux栈的,咱们也不能落后呀,在 ...
- vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)
watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...
- vue路由history模式刷新页面出现404问题
vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...
- 解决vue路由history模式刷新后404的问题
server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...
- 每天一点点之vue框架开发 - History 模式下线上路由报404错误
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
- Vue路由History模式分析
Vue路由History模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属性可以 ...
随机推荐
- UMDCTF 2021
6道pwn题,4道可以做.剩下一道题是arm架构,一道题是内核,溜了溜了. Jump_Not_Easy 1 from pwn import * 2 3 p = process('./pwn') 4 e ...
- 2020ACTF pwn writeup
为了打2021的ACTF,想着把2020年的pwn题做一做吧,发现2020年的pwn题质量还挺高的.反倒是2021年的题目质量不太高,好像是没有专门的pwn师傅出题,可以理解,毕竟办校赛,说白了就是用 ...
- 自动化测试环境搭建之Python3.6+selenium44+firefox
推荐使用: Python3.6+selenium2.53.6+Firefox46以下 +[Chrome任意版本+对应版本webdriver] ----------------------------- ...
- 【Azure Redis 缓存】Azure Cache for Redis 中如何快速查看慢指令情况(Slowlogs)
问题描述 当 Azure Redis 服务器负载过高的情况下,使用时就会遇见连接超时,命令超时,IO Socket超时等异常.为了能定位是那些因素引起的,可以参考微软官方文档( 管理 Azure Ca ...
- C++ happens-before 关系是不可传递的
P0668R4 对此进行了解释 The definition of plain happens-before became unpleasantly complicated with the intr ...
- CF1581B Diameter of Graph 题解
Content \(\textsf{CQXYM}\) 想要构造一个包含 \(n\) 个点和 \(m\) 条边的无向连通图,并且他希望这个图满足下列条件: 该图中不存在重边和自环.也就是说,一条边应该连 ...
- MAVEN基础讲解
MAVEN解决的问题 1.当我们开始一个工程的时候往往需要几十甚至上百个jar包,如果没有一个管理工具的话,结果就是每个都需要自己手动导入工程目录,并且还有可能发生jar包冲突,版本冲突等问题 2.在 ...
- libevent源码学习(10):min_heap数据结构解析
min_heap类型定义min_heap函数构造/析构函数及初始化判断event是否在堆顶判断两个event之间超时结构体的大小关系判断堆是否为空及堆大小返回堆顶event分配堆空间堆元素的上浮堆元素 ...
- MyBatis学习(二)MyBatis-Statement方式的增删改查
1.前期准备 项目骨架图如下所示 1.配置conf.xml <?xml version="1.0" encoding="UTF-8" ?> < ...
- 安装MingW64_配置C/C++开发环境_Windows10
下载安装 mingw-w64托管在sourceforge,下载地址: https://sourceforge.net/projects/mingw-w64/ 安装过程中... 除了下图的界面,其他选择 ...