Vue进阶 | 路由的两种模式路由分为两种模式：hash 模式和 history 模式（HTML5 模式） ### 1.

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

提到路由首先要了解关于SPA的概念，在前面关于性能优化的文章中曾经提到过SPA的概念：juejin.cn/post/711169…

单页应用程序 SPA

SPA 是一个 JavaScript 框架，仅在该Web页面初始化时加载相应的资源。加载完成后，利用 JavaScript 动态的变换HTML的内容，不会重新加载公共资源或跳转（一个外壳页+多个页面片段）

目前三种最流行的SPA工具是：Vue、React、Angular。

在构建单页面应用时，就需要引入路由。以Vue为例，就是Vue-router

路由分为两种模式：hash 模式和 history 模式（HTML5 模式）

表现形式： 地址栏URL中的#号后 + hash值。

具体如下：

http://localhost:8080/#/detail, hash 的值为#/detail

http://localhost:8080/#/home, hash 的值为#/home
特点：

# 后面的路径发生变化时，浏览器不会重新发起请求（不会包含在HTTP请求中），而是触发 hashchange 事件。所以，在#后面做路由的变化，hash改变，页面不会刷新，即不会重新加载页面。
创建方法

createWebHashHistory()
获取方式：直接通过window.location来获取hash
```
window.location.hash
```

history模式可以直接更改前端路由，改变了当前的 URL，浏览器不会立即向后端发送请求

表现形式：

http://localhost:8080/detail

http://localhost:8080/home
创建方法

createWebHistory()
404问题

history 模式需要服务端支持，如果没有适当的服务器配置，进入页面会出现404的情况（因为是单页的客户端应用），需要利用history的一些api来实现。