Vue CLI：路由器的两种工作模式（hash、history）

路由器的两种工作模式

• 对于一个url来说，什么是hash值？ #及其后面的内容就是hash值
• hash值不会包含在HTTP请求中，即：hash值不会带给服务器
• hash模式
  • 地址中永远带着#号，不美观
  • 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
  • 兼容性较好
• history模式
  • 地址干净，美观
  • 兼容性和hash模式相比略差
  • 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题 

哈希模式(hash)

哈希模式是 Vue.js 路由器的默认工作模式。在这种模式下，所有 URL 都带有一个 # 符号，后面跟着一个路由路径。例如： 

http://example.com/#/home
http://example.com/#/about
http://example.com/#/contact

这个 # 符号实际上是 URL 中的一个锚点（anchor），它表示页面中的一个位置。当浏览器访问这些 URL 时，它们不会向服务器发送请求，而是只在客户端进行页面导航。这种模式的优点是可以轻松地实现前端路由，而不需要服务器端的支持。但它的缺点是 URL 不太友好，而且可能会对 SEO 产生负面影响。

配置哈希模式：

const router = new VueRouter({
  mode: 'hash',//默认
  routes: [...]
})

历史模式(history)

历史模式是另一种 Vue.js 路由器的工作模式。在这种模式下，URL 不带 # 符号，而是直接使用路由路径。例如： 

http://example.com/home
http://example.com/about
http://example.com/contact

这种模式需要服务器端的支持，因为当浏览器访问这些 URL 时，它们会向服务器发送请求。服务器必须正确地处理这些请求，并返回正确的页面内容。这种模式的优点是 URL 更加友好，而且对 SEO 更加有利。但它的缺点是需要服务器端的支持，而且可能会导致一些问题，例如刷新页面时出现 404 错误。

配置历史模式：

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

nginx配置（nginx.htaccess）

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

IIS 配置（web.config）

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer> 
    <rewrite>
      <rules>
        <rule name="vue" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>