Vue Router 的跳转方式主要分为声明式导航和编程式导航两大类涵盖了日常开发中所有常见的路由跳转场景。下面我会详细讲解每种方式的用法、场景和注意事项代码示例兼顾 Vue2 和 Vue3。一、声明式导航router-link 组件这是 Vue Router 提供的专属组件本质是对a标签的封装适合在模板中直接写跳转链接的场景比如导航栏、菜单。1. 基础用法直接写路径!-- 跳转到 /home 路径 -- router-link to/home首页/router-link2. 带参数的跳转对象形式推荐支持传递params动态路由参数、query查询参数比直接拼接路径更易维护!-- 带动态路由参数 -- router-link :to{ name: User, params: { id: 1001 } } 用户1001 /router-link !-- 带查询参数 -- router-link :to{ name: Goods, query: { page: 1, size: 10 } } 商品列表 /router-link3. 替换当前历史记录replace默认跳转会新增一条历史记录可回退加replace属性则替换当前记录不可回退router-link to/login replace登录不可回退/router-link4. 设置激活样式active-class跳转后自动给当前链接加样式适合做导航选中态!-- Vue3 推荐用 active-classVue2 可直接用 class -- router-link to/home active-classactive首页/router-link !-- 样式示例 -- style .active { color: red; font-weight: bold; } /style二、编程式导航JS 代码控制通过调用router实例的方法实现跳转适合在事件处理、逻辑判断后跳转比如登录成功后跳首页。1. 核心方法router.push ()最常用的跳转方式等价于router-link toxxx支持字符串 / 对象参数// Vue2 选项式 API this.$router.push(/home) // 字符串路径 this.$router.push({ name: User, params: { id: 1001 } }) // 对象形式 this.$router.push({ path: /goods, query: { page: 1 } }) // 带 query 参数 // Vue3 组合式 API import { useRouter } from vue-router const router useRouter() router.push(/home)2. 替换历史记录router.replace ()等价于router-link replace替换当前历史记录// Vue2 this.$router.replace(/login) // Vue3 router.replace(/login)3. 前进 / 后退router.go () /router.back () /router.forward ()模拟浏览器的前进 / 后退按钮控制历史记录的跳转// Vue2 this.$router.back() // 后退1步等价于 window.history.back() this.$router.forward() // 前进1步等价于 window.history.forward() this.$router.go(-2) // 后退2步正数前进、负数后退、0 刷新当前页 // Vue3 router.go(1) // 前进1步4. 跳转到命名路由推荐通过name跳转而非path好处是路径变化时无需修改跳转代码// 路由配置提前定义 name // { path: /user/:id, name: User, component: User } // 跳转只改 name 对应的 path 即可跳转代码无需动 router.push({ name: User, params: { id: 1001 } })三、特殊场景的跳转方式1. 重定向路由配置层面在路由规则中配置redirect访问 A 路径自动跳转到 B 路径适合旧路径兼容、默认首页等场景// router/index.js const routes [ // 访问 / 自动跳转到 /home { path: /, redirect: /home }, // 带参数的重定向 { path: /old-user/:id, redirect: { name: User, params: { id: :id } } } ]2. 别名alias和重定向不同别名是「路径别名」URL 显示别名路径但实际匹配原路由// 访问 /index 等价于访问 /homeURL 仍显示 /index { path: /home, name: Home, component: Home, alias: /index }四、注意事项编程式导航中用path跳转时params参数会失效只能用query用name跳转时params才生效。// ❌ 错误path params 不生效 router.push({ path: /user, params: { id: 1001 } }) // ✅ 正确name params 或 path query router.push({ name: User, params: { id: 1001 } }) router.push({ path: /user/1001 })跳转外部链接非 Vue 路由直接用a标签或window.location.href不要用router-link。避免重复跳转报错如果连续点击同一路由会抛出「NavigationDuplicated」错误可通过以下方式解决// Vue2 解决方案 const originalPush VueRouter.prototype.push VueRouter.prototype.push function push(location) { return originalPush.call(this, location).catch(err err) } // Vue3 无需手动处理新版已修复总结声明式导航用router-link组件适合模板中静态跳转导航栏 / 菜单支持to、replace、active-class等属性。编程式导航用router.push/replace/go方法适合 JS 逻辑中动态跳转登录 / 按钮点击推荐用name而非path跳转。特殊场景路由配置中的redirect重定向、alias别名适合路径兼容或默认跳转需求。