【JavaScript】不使用框架路由进行页面跳转

一、普通跳转（页面刷新）

1. 使用 window.location 系列方法

• window.location.href
直接修改 URL 实现跳转，保留浏览器历史记录：

methods: {
  goToHome() {
    window.location.href = '/home'; // 跳转到首页
  }
}

• window.location.replace()
替换当前页面，不保留历史记录（适用于登录后跳转等场景）：

methods: {
  redirectToLogin() {
    window.location.replace('/login');
  }
}

2. 动态创建 标签模拟点击

通过 JavaScript 创建隐藏的 标签并触发点击事件，适用于需要动态生成跳转链接的场景：

methods: {
  jumpToExternal(url) {
    const a = document.createElement('a');
    a.href = url;
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}

---

二、无刷新跳转（单页应用效果）

1. 使用 history.pushState()

通过 HTML5 History API 修改 URL 并动态加载组件，实现无刷新跳转：

methods: {
  goToDetails(id) {
    // 修改 URL
    history.pushState({ path: `/details/${id}` }, '', `/details/${id}`);
    // 手动加载组件（需自行实现逻辑）
    this.loadComponent(`/details/${id}`);
  },
  loadComponent(path) {
    // 根据路径渲染对应组件（如使用动态组件或条件渲染）
    this.currentComponent = path === '/details' ? DetailsComponent : null;
  }
}

注意：需监听 popstate 事件处理浏览器前进/后退操作：

mounted() {
  window.addEventListener('popstate', (event) => {
    if (event.state?.path) {
      this.loadComponent(event.state.path);
    }
  });
}

2. 条件渲染组件

通过 Vue 的 v-if 或动态组件 () 切换显示内容，模拟页面跳转效果：

---

四、其他场景

1. 新窗口打开页面

通过 window.open() 实现新窗口跳转（如打开外部链接）：

methods: {
  openNewWindow() {
    window.open('https://example.com', '_blank');
  }
}

---

技术选型建议

方法	适用场景	优缺点
window.location	简单跳转或外部链接	实现简单，但会触发页面刷新
history.pushState	单页应用无刷新跳转	需手动处理组件加载和浏览器历史事件
动态组件条件渲染	少量页面切换	无需路由，但维护成本随页面数量增加而提高
URL参数/LocalStorage	跨页面传参	数据需手动管理，可能存在安全性问题