【Vue Router】009-HTML5 History 模式

ゝ一纸荒年。 2023-10-01 11:35 31阅读 0赞

## 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>