HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
mode: 'history',
routes: [...]
})

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

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

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

#后端配置例子

#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>

除了 mod_rewrite,你也可以使用 FallbackResource

#nginx

location / {
try_files $uri $uri/ /index.html;
}

https://router.vuejs.org/zh/guide/essentials/history-mode.html

nginx 刷新显示404的更多相关文章

  1. NGINX 配置404错误页面转向

    什么是404页面 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是 ...

  2. nginx error_page 404 用 php header 无法跳转

    nginx error_page 404 用 php header 无法跳转 之前用Apache的时候,只需要设置 ErrorDocument 404 /404.php 就可以在 404.php 中根 ...

  3. NGINX 配置404错误页面转向

    什么是404页面 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是 ...

  4. Nginx自定义404页面并返回404状态码

    Nginx定义404页面并返回404状态码, WebServer是nginx,直接告诉我应该他们配置了nginx的404错误页面,虽然请求不存在的资源可以成功返回404页面,但返回状态码确是200. ...

  5. Nginx实现404页面的几种方法【转】

    一个网站项目,肯定是避免不了404页面的,通常使用Nginx作为Web服务器时,有以下集中配置方式,一起来看看. 第一种:Nginx自己的错误页面 Nginx访问一个静态的html 页面,当这个页面没 ...

  6. Ubuntu nginx 配置404错误页面

    1.创建自己的404.html页面: 2.更改nginx.conf在http定义区域加入: /etc/nginx# vim nginx.conf 下添加 fastcgi_intercept_error ...

  7. nginx配置404

    1.创建一个404错误时显示的页面 2.在nginx.conf中的http区域加入: fastcgi_intercept_errors on; 3.在nginx.conf的server区域(如果网站有 ...

  8. nginx+apache 404错误页面

    公司新系统  随风做的  给客户演示出错不想让客户看到   自动返回上一页面. 刚开始按照网上说的 在nginx 处理: # 定义错误提示页面 error_page 500 502 503 504 / ...

  9. wordpress配置固定链接nginx访问404问题解决方法

    WordPress支持使用固定链接,但是在ngnix环境下,访问页面后出现404, 其实官方是有文档说明的,需要单独写配置, 我这边配置的示例代码如下: server { listen       8 ...

随机推荐

  1. rsync 学习

    参考 http://www.cnblogs.com/itech/archive/2009/08/10/1542945.html 模式1 本地直接拷贝, 这个其实是调用了 cp 命令, 跟 rsync ...

  2. 14. js字符串截取substring用法

    columnIds = columnIds.substring(0, columnIds.length-1);

  3. php单图片上传。

    1.input:file form 提交 /** * 用户头像上传 * @param [type] $file 图像信息 */ function domeadd($file){ if (is_arra ...

  4. Ubuntu系统tensorflow安装问题及解决

    su root   ps:如果你没有改过root密码,sudo passwd 然后输入你的账户密码,然后设置你的root密码 在root权限下执行pip install --upgrade pip 更 ...

  5. Node 在 Centos7 系统下的安装

    1,下载二进制包  https://nodejs.org/zh-cn/download/     根据自己的需求选择对应的版本,不推荐使用源码包,容易出现错误 2,上传到 linux 服务器 3, 解 ...

  6. kubernetes下安装mysql

    参考文档:https://blog.csdn.net/sealir/article/details/81177747 注:有mysql安装在k8s集群内,集群外且通过k8s service endpo ...

  7. springMVC源码学习之获取参数名

    1.入口到参数处理调用流程 入口为spring-webmvc-4.3.18.RELEASE.jar中org.springframework.web.servlet.DispatcherServlet. ...

  8. oracle删除表数据的两种的方式

    转自:https://blog.csdn.net/qq_37840993/article/details/82490787 平时写sql中我们都会用到删除语句,而平时删除表数据的时候我们经常会用到两种 ...

  9. 机器学习进阶-案例实战-停车场车位识别-keras预测是否停车站有车

    import numpy import os from keras import applications from keras.preprocessing.image import ImageDat ...

  10. 机器学习进阶-图像基本操作-图像数据读取 1.cv2.imread(图片读入) 2.cv2.imshow(图片展示) 3.cv2.waitKey(图片停留的时间) 4.cv2.destroyAllWindows(清除所有的方框界面) 5.cv2.imwrite(对图片进行保存)

    1. cv2.imread('cat.jpg', cv2.IMGREAD_GRAYSCALE)  # 使用imread读入图像(BGR顺序), 使用IMGREAD_GRAYSCALE 使得读入的图片为 ...