• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5 History模式是什么

HTML5 History模式是什么

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含History,HTML5,是什么等相关知识,匿名希望在学习及工作中可以帮助到您
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 依赖的页面。

后端配置例子

<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;
}

Node.js (Express)

https://github.com/bripkens/connect-history-api-fallback
警告
给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

或者,如果你是用 Node.js 作后台,可以使用服务端的路由来匹配 URL,当没有匹配到路由的时候返回 404,从而实现 fallback。

以上就是HTML5 History模式是什么的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 详解HTML5之pushstate、popstate操作history,无刷新改变当前url
  • HTML5 History API 实现无刷新跳转
  • HTML5 history新特性pushState、replaceState及两者的区别
  • 深入探究HTML5的History API
  • HTML5学习笔记之History API
  • React Router中的核心history库的详细分析
  • H5中History模式的使用详解
  • HTML5 History模式是什么
  • HTML5中关于History模式的详解
  • history解决ajax出现的问题

相关文章

  • 2018-12-03HTML5新标签之Canvas详细介绍
  • 2018-12-03HTML5画渐变背景图片并自动下载实现步骤_html5教程技巧
  • 2018-12-03如何让IE9以下版本(ie6/7/8)认识html5元素_html5教程技巧
  • 2017-08-06HTML5 transform三维立方体实现360无死角三维旋转效果
  • 2018-12-03HTML5 Canvas实现文本对齐的方法总结_html5教程技巧
  • 2018-12-03canvas多边形的画法示例
  • 2018-12-03HTML5中div、article、section的区别及使用介绍_html5教程技巧
  • 2018-12-03用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件
  • 2018-12-03HTML5 Canvas绘制时指定颜色与透明度的方法
  • 2017-08-06HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 为什么制定html5标准的网站奇丑无比?
    • 看完《CSS权威指南》、《JavaScript权威指南》和《深入理解 HTML5:语义、标准与样式》能否胜任前端工程师?
    • phonegap创建联系人详解
    • htnl5利用svg页面高斯模糊的方法
    • HTML5实现一个图片滤镜效果的示例代码分享
    • html5 的a标签 Href 拨电话的写法
    • html5 video.js 使用及兼容所有浏览器
    • HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍_html5教程技巧
    • 基于HTML5 的人脸识别活体认证的实现方法
    • Html5实现文件异步上传功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有