JS 与 Vue Router 导航方式对比

JS 与 Vue Router 导航方式对比

📌 之前的 JS 跳转实现方式

根据你提供的课件内容，这里的"编程式导航"主要是在 Vue 框架 下的实现，而更早的原生 JS 跳转方式如下：

---

1. 原生 JS 跳转（传统方式）

在 Vue 出现之前，前端页面跳转主要通过修改浏览器地址来实现：

• 本页面跳转（覆盖当前页）：

  // 点击按钮后跳转到指定页面
  window.location.href = '目标页面地址';
  // 示例：
  <button onclick="window.location.href='home.html'">跳转到首页</button>

• 新开页面跳转：

  // 点击按钮后在新标签页打开
  window.open('目标页面地址');

• 替换当前历史记录（无法返回）：

  window.location.replace('目标页面地址');

---

2. Vue 中的编程式导航（现在的方式）

在 Vue 项目中，使用 vue-router 实现单页应用（SPA）跳转，不再刷新整个页面：

• 核心方法 ：this.$router.push()

  // 路径跳转（简写）
  this.$router.push('/home');
  
  // 路径跳转（完整写法）
  this.$router.push({ path: '/home' });
  
  // 命名路由跳转（适合长路径）
  this.$router.push({ name: 'Home' });

• 按钮绑定点击事件：

  <button @click="goHome">点击跳转首页</button>

  methods: {
    goHome() {
      this.$router.push('/home');
    }
  }

---

3. 微信小程序中的编程式导航（类似逻辑）

如果是小程序开发，跳转方式为：

// 保留当前页，跳转到新页
wx.navigateTo({
  url: '/pages/home/home'
});

// 关闭当前页，跳转到新页（无法返回）
wx.redirectTo({
  url: '/pages/home/home'
});

---

✅ 总结

• 传统 JS ：用 window.location.href 或 window.open() 直接修改地址实现跳转，会刷新页面。

• Vue 编程式导航 ：用 this.$router.push() 控制路由，实现无刷新页面切换，是现代前端的主流方式。

• 小程序 ：用 wx.navigateTo() 等 API 实现页面栈管理。