vue3路由跳转页面更新了但URL没有更新

在路由跳转时保持 URL 的一致性:

1. history 模式：

   • 这种模式利用了 HTML5 History API 来实现 URL 的变化，不会在 URL 中出现 # 符号。
   • 它可以让 URL 看起来更像是传统的多页网站，例如 http://www.example.com/user/profile 而不是 http://www.example.com/#/user/profile。
   • 使用 history 模式时，当用户刷新页面或者直接通过新标签打开 URL 时，服务器需要配置所有路由请求都返回 index.html 文件，然后由前端路由接管。

2. hash 模式：

   • 这是 Vue Router 的默认模式，它使用 URL 的 hash 来模拟一个完整的 URL，从而不触发页面的重新加载。
   • 在这种模式下，URL 会包含 #，例如 http://www.example.com/#/user/profile。
   • hash 模式不需要服务器配置，因为 URL 的变化不会影响服务器请求的资源，所以它适用于不支持 SPA 的服务器配置。

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(), // 使用 `createWebHistory` 来设置 `history` 模式
  routes: [
    // 路由配置
  ],
});

注意：查看你的代码，在router->index.ts下，引入的是

import {createRouter, createWebHistory} from "vue-router";

history: createWebHistory(), //路由器的工作模式

正确配置以后，url路由和页面匹配！！！