Vue项目中window.history.pushState重复添加路径问题求助

问题出在你使用了相对路径email/${id}调用pushState，浏览器会把这个路径追加到当前页面的URL后面，导致多次点击后路径重复叠加。

解决方法： #

• 使用绝对路径
  把路径改成以斜杠开头的绝对路径，强制从根路径开始构建URL，避免重复追加：

  const updateURL = (id: string) => {
    window.history.pushState({}, '', `/email/${id}`);
  };
  

• 用Vue Router处理路由（推荐）
  Vue项目更建议用官方路由工具来管理路径，它会自动处理路由跳转的逻辑，不会出现路径重复问题：

  // Vue2 选项式API
  const updateURL = (id: string) => {
    this.$router.push({ path: `/email/${id}` });
  };
  
  // Vue3 组合式API
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const updateURL = (id: string) => {
    router.push({ path: `/email/${id}` });
  };
  

• 手动维护路径（备选）
  如果你不想用Vue Router，也可以直接替换为目标绝对路径（无需额外判断，效果和第一种方法一致）：

  const updateURL = (id: string) => {
    const currentPath = window.location.pathname;
    window.history.pushState({}, '', `/email/${id}`);
  };
  

内容的提问来源于stack exchange，提问作者Ballazx