Vue 中 hash 模式和 history 模式的区别

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配置步骤：

1. 下载、解压(目录不能有中文)
2. 命令行

start nginx
nginx -s reload
nginx -s stop

3. html 文件夹中(打包后的资源)

conf/nginx.conf try_files $uri $uri/ /index.html

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