vue Router路由跳转

在 Vue 中实现路由跳转主要通过 Vue Router 实现，以下是常见的路由跳转方法：

---

一、声明式导航（模板中使用 <router-link>）

在模板中直接使用 <router-link> 组件，通过 to 属性指定目标路由路径：

<router-link to="/home">首页</router-link>
<router-link :to="{ path: '/user' }">用户页</router-link>

支持动态绑定路径、命名路由和参数：

<router-link :to="{ 
  name: 'user', 
  params: { id: 123 }, 
  query: { name: 'John' }
}">用户详情</router-link>

---

二、编程式routerAPI导航（JavaScript 中跳转）

在组件方法中通过 this.$router 调用 API 实现跳转：

1. router.push()

跳转到新路由并保留历史记录（可后退）：

// 路径字符串
this.$router.push('/home')

// 对象形式
this.$router.push({ path: '/user' })

// 命名路由 + 参数
this.$router.push({ 
  name: 'user', 
  params: { id: 1 } // 需要路由配置动态字段，如 path: '/user/:id'
})

// 查询参数（URL 显示为 /user?name=John）
this.$router.push({ 
  path: '/user', 
  query: { name: 'John' }
})

2. router.replace()

跳转但不保留历史记录（不可后退）：

this.$router.replace('/login')

3. router.go(n)

前进或后退指定步数：

this.$router.go(-1) // 后退一步
this.$router.go(2)  // 前进两步

---

三、动态路由参数

在路由配置中定义动态字段（如 :id），通过 params 传递参数：

// 路由配置
{
  path: '/user/:id',
  name: 'user',
  component: User
}

// 跳转时传递参数
this.$router.push({ name: 'user', params: { id: 123 } })

---

四、注意事项

1. params 和 path 冲突：
   使用 params 时需配合 name，若指定 path 则 params 会被忽略。

2. 查询参数 vs 路径参数：

   • query：参数显示在 URL 的 ? 后（如 /user?name=John）。
   • params：参数嵌入路径（需路由配置，如 /user/123）。

3. 导航守卫：
   可通过 beforeEach 等守卫拦截或控制跳转逻辑（如权限验证）。

---

总结

方法	场景
<router-link>	模板中静态或简单动态跳转
router.push()	编程式跳转，保留历史记录
router.replace()	跳转后不保留历史记录（如登录后跳转）
router.go()	前进或后退页面

根据需求选择合适的方法，确保路由配置正确（尤其是动态参数和命名路由）。