vue-router - 路由模式

我正在参加「掘金·启航计划」

路由模式

在 Vue Router 中，history 配置有两种模式可选，即 hash 模式和 HTML5 模式

hash 模式

hash 模式使用 URL 的哈希部分（# 符号后面的部分）来模拟完整的 URL

例如www.example.com/#/news或www.example.com/#/contact

由于在切换的时候，hash并不会发送给服务器，所以它不需要在服务器层面上进行任何特殊处理，但是使用hash模式并不利于SEO

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

const router = createRouter({
  // 通过createWebHashHistory() 创建hash路由
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

HTML5 模式

HTML5 模式使用浏览器的 history API 来实现前端路由，URL 看起来更像是传统的 URL，例如 https://example.com/user/id

HTML5模式下，路由看起来更像是传统的URL，但是用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误，因为服务器端并没有对应的路由配置

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

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

const router = createRouter({
  // 通过createWebHistory() 创建history路由
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

服务器配置

具体配置参考