路由的两种工作模式-hash与history

1.createWebHashHistory()：Hash模式

• 它在内部传递的实际URL之前使用了一个哈希字符#，如https://example.com/#/user/id
• 由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理

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

const router = createRouter({
    history: createWebHashHistory() // 使用 history 模式路由
    // ……
})

export default router

2.createWebHistory()：html5模式，推荐使用

• 当使用这种历史模式时，URL会看起来很“正常”，如https://example.com/user/id
• 由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问https://example.com/user/id，就会得到一个404错误；要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果URL不匹配任何静态资源，它应提供与你的应用程序中的index.html相同的页面

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

const router = createRouter({
    history: createWebHistory() // 使用 history 模式路由
    // ……
})

export default router