1. 客户端 vs. 服务端路由

       服务端路由 是传统的URL跳转，如a标签跳转。当用户在浏览器输入地址后向服务器请求资源，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。
       客户端路由： 像vue-router就是客户端路由。vue是单页面应用,只有一个页面，路由改变时只是从服务器获取资源重新渲染了页面（还是当前页面）。这样通常可以带来更顺滑的用户体验。

2. hash模式

      它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。
      hash模式的原理是用hashchange事件监听浏览器地址上#后面的变化来做出相应的改变。

2.1 优缺点：

优点： vue-router的默认模式，配置简单，不需要在服务器上配置。
缺点： 1.不美观
2.当新打开页面时容易出现空白页面
3.微前端项目不建议使用hash模式，路由跳转之间容易造成混乱

3. history模式

      是HTML5模式，使用这种模式url会显示的正常，不带#。不过，问题来了。部署到服务器后，由于我们的应用是一个单页的客户端应用，如果没有服务器配置，用户在浏览器中直接访问时刷新，就会得到一个 404 错误。

3.1 history模式nginx配置

前端配置：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), //每个路由上都会携带的，在端口号的后边
  routes
})

nginx.conf配置：

server { 
    listen 9903; 
    server_name localhost; 
    location / { 
        root 'G:\dist'; 
        index /index.html; 
        try_files $uri $uri/ /index.html;
    }
}

如果路由要使用history模式，并且想要一个根目录下面挂多个站点
前端配置：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), //每个路由上都会携带的，在端口号的后边
  routes
})

配置vite.config.js：

base:env.VITE_BASE_URL,

index.html页面的public目录下的引用也要改。
nginx.conf配置：

server { 
    listen 9903;
    server_name localhost;
    root 'G:\dist'; //这个是通过localhost:9903/aabb/可以访问 
    location /aabb {
        index /index.html; 
        try_files $uri $uri/ /aabb/index.html;
     } //这个是通过localhost:9903/one/可以访问 
    location /one { 
        index /index.html; 
        try_files $uri $uri/ /one/index.html; 
    } 
}

• $uri: 当前请求路由
  这句话意思是尝试请求当前路由，如果请求不到，就返回当前目录下的index.html