声明式导航与编程式导航有何区别？如何区分 router-link 和 router.push 的使用方法？

本文共计658个文字，预计阅读时间需要3分钟。

声明式导航 是在模板中使用标签直接编写跳转逻辑，例如：

声明式导航：模板中写链接，适合静态跳转

用 <router-link> 组件，在 HTML 模板中声明目标路由，点击即跳转：

• 字符串写法：<router-link to="/home">首页</router-link>
• 对象写法（推荐）：<router-link :to="{ name: 'User', params: { id: 123 } }">用户详情</router-link>，支持带 query 或 params
• 自动渲染为 <a> 标签，会阻止默认跳转行为，适配 history/hash 模式
• 不支持运行时判断或异步逻辑——点就跳，没法加条件或等待

编程式导航：JS 中调用方法，适合动态控制

在 methods、生命周期或事件处理函数中，用 this.$router.push() 主动跳转：

• 字符串路径：this.$router.push('/search')
• 命名路由对象：this.$router.push({ name: 'Search', query: { keyword: 'vue' } })
• 可配合条件判断：if (user.isLoggedIn) this.$router.push('/dashboard')
• 可嵌入异步操作后跳转：await api.login(); this.$router.push('/profile')
• 还支持 replace()（不留下历史）、go(-1)（返回上一页）等进阶操作

传参方式完全一致，关键看怎么用

无论是 <router-link :to="...> 还是 this.$router.push(...)，参数结构一模一样：

• 查参数统一走 query：地址栏显示，如 /search?keyword=vue
• 动态参数必须用命名路由 + params：如 { name: 'Post', params: { id: 5 } } → 路由需配 path: '/post/:id'
• 注意：path 写法下 params 会被忽略，只有 name 才能生效
• 复杂数据建议转成字符串传 query，或用 state（配合 history.state）传递轻量对象

怎么选？看场景是否需要“干预”跳转时机

如果只是菜单、按钮这类固定链接，用 <router-link> 更简洁；如果要登录校验、权限拦截、表单提交后跳转、错误重试等，必须用 this.$router.push()。

它们不是互斥关系——<router-link> 底层其实就调用了 $router.push()，只是封装得更友好。