Vue.js 中的路由有哪些模式？它们之间有什么区别？

Vue.js 支持多种路由模式:

hash 模式:

1. 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
2. 丑陋的 URL,例如 http://oursite.com/#/user/1 。
3. 兼容性良好。

使用方式:

js
const router = new VueRouter({
  routes,
  mode: 'hash'  
})

history 模式:

1. 使用 HTML5 的 history.pushState API 来完成 URL 跳转而无须重新加载页面。
2. 页面 URL 的表现形式更加美观,例如 http://oursite.com/user/1 。
3. 需要后台配置支持。

使用方式:

js
const router = new VueRouter({
  routes,
  mode: 'history'  
})

abstract 模式:

1. 支持所有 JavaScript 运行环境,如 Node.js 服务器端。
2. 底层实现与 hash 模式相同。
3. 用于构建同构应用。

使用方式:

js 
const router = new VueRouter({
  routes,
  mode: 'abstract'
}) 

所以:
hash 模式用于古老浏览器的兼容, URLs 丑陋但生效。
history 模式用于现代浏览器,URLs 美观生效并需要服务器配置。
abstract 模度用于跨端应用的构建。