Hash
- 在 hash 模式下 url 中带有 " # "
- 是基于锚点以及 onhashchange 事件
- 在 "# "后面的内容作为路径地址
- 根据当前路由地址找到对应组件重新渲染
History
- 基于HTML5 API
- 用 history.pushState() 改变地址栏 在 IE10 以后才支持
- history.replaceState()
- 监听popstate事件,根据当前路由地址找到对应组件重新渲染
- mode:‘history’
- 使用需要服务器端的支持
单页应用中,服务端不存在http://www.testurl.com/login这样的地址会返回找不到该页面。
在服务端应该除了静态资源外都返回单页应用的index.html。
node中配置(express)
const history = require('connect-history-api-fall-back')
app.use(history())
nginx中配置
nginx配置步骤:
- 下载、解压(目录不能有中文)
- 命令行
start nginx
nginx -s reload
nginx -s stop
- html 文件夹中(打包后的资源)
conf/nginx.conf try_files $uri $uri/ /index.html
server{
location / {
try_files $uri $uri/ /index.html
}
}