vue-router路由的两种模式

Vue-router 是一个官方的路由管理器工具，用于实现单页面应用中的路由控制。它提供了两种路由模式：hash 模式和 history 模式。

1. hash 模式

在 hash 模式下，url 中的 hash 值会用来模拟一个完整的 URL 路径。例如，当访问网站时，URL 地址可能是 http://www.example.com/#/about，其中的 # 符号后面的部分就是 hash 值，代表了当前路由的路径。这样的设计可以确保页面不会被重新加载，同时还可以实现路由切换的效果。

在 Vue-router 中，我们可以通过以下代码来启用 hash 模式：

```

const router = new VueRouter({

mode: 'hash'

routes: [...]

})

```

hash 模式的优点是兼容性好，支持大部分浏览器。并且在开发过程中，不用担心刷新页面会导致路由丢失，因为 hash 会一直保存在 URL 中。但是，hash 模式的 URL 略显丑陋，并且不够友好，不太符合现代化的网站设计风格。

2. history 模式

在 history 模式下，URL 会以正常的路径方式显示，不再依赖于 hash 值。例如，当访问网站时，URL 地址可能是 http://www.example.com/about，没有任何特殊符号。这种方式更加友好和美观，更符合现代化的网站设计风格。

在 Vue-router 中，我们可以通过以下代码来启用 history 模式：

```

const router = new VueRouter({

mode: 'history'

routes: [...]

})

```

history 模式的优点是 URL 更加美观和友好，符合现代化的网站设计风格。并且不会再依赖于 hash 值，从而提高了网站的整体质量。但是，history 模式需要服务器端配合，以避免出现 404 错误。并且在一些老版本的浏览器中可能不够兼容，需要额外的处理和兼容性方案。

总的来说，无论选择 hash 模式还是 history 模式，都需要权衡各自的优缺点，并根据项目需求和实际情况来选择适合的路由模式。在大多数情况下，推荐使用 history 模式，因为它更加符合现代化的网站设计风格，同时也对用户体验更友好。