Vue Router(8)

在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择

 

Hash模式

hash 模式是用 createWebHashHistory() 创建的

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

它在内部传递的实际URL之前使用了一个哈希字符（#）。由于这部分URL从未发送到服务器，所以它不需要再服务器层面上进行任何特殊处理。不过，它在SEO中确实有不好的影响。如果你担心这个问题，可以使用HTML5模式。

 

HTML5模式

用 createWebHistory() 创建HTML5模式，推荐使用这个模式：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

当使用这种历史模式时，URL会看起来很正常

不过，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id， 就会得到404错误。

要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果URL不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面