【Vue Router】009-HTML5 History 模式

1.9 HTML5 History 模式

1.9.1 概述

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。该模式是通过调用 createWebHashHistory() 函数创建的，这会在 URL 中使用 “#” 来标识要跳转目标的路径，如果你觉得这样很难看，可以使用 HTML5 History 模式。

HTML5 History 模式是通过调用 createWebHistory() 函数创建的

1.9.2 在路由导航配置文件 index.js 中修改为 HTML5 History 模式

这里仅贴出修改的代码

import { createRouter, createWebHistory } from 'vue-router'
...
const router = createRouter({
  history: createWebHistory(),
  ...
})

注意： 当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！ 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。 所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 官方后端配置示例：https://next.router.vuejs.org/zh/guide/essentials/history-mode.html#服务器配置示例

1.9.3 Tomcat 配置方式

在项目根目录下新建 WEB-INF 子目录，在其下新建一个 web.xml 文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                             http://java.sun.com/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>

</web-app>