Vue路由模式

Vue Router 是 Vue.js 官方的路由管理器，它为 Vue 应用程序提供了强大的客户端路由功能。Vue Router 支持两种路由模式：hash 模式和 history 模式。这两种模式分别适用于不同的场景，并且有着各自的特点和优势。本文将详细介绍这两种模式的基本概念、作用及其使用方法，并通过具体的代码示例来帮助读者更好地理解和掌握它们。

基本概念与作用

Hash 模式

在 hash 模式下，URL 的 hash 部分（# 符号后面的部分）被用来表示当前路由的位置。这种模式的优点在于它不需要服务器的支持即可工作，因为浏览器会忽略 hash 变化而不会重新请求页面。因此，在没有服务器端支持的情况下，hash 模式是一个简单易用的选择。

History 模式

history 模式则使用 HTML5 的 History 接口来管理浏览器的历史记录。在这种模式下，URL 不包含 # 字符，看起来更像是传统的服务端渲染的网站 URL。然而，这需要服务器的配合，因为它需要正确的配置来返回 index.html 页面，以便 Vue Router 可以接管路由逻辑。

示例一：Hash 模式

首先，我们需要创建一个 Vue Router 实例并定义一些路由规则。然后，我们将设置 Vue Router 使用 hash 模式。

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 定义路由规则
const routes = [
  {
    path: '/', component: HomeComponent },
  {
    path: '/about', component: AboutComponent },
  {
    path: '/users/:id', component: UserComponent }
]