声明式导航用<router-link>在模板中静态跳转，编程式导航用this.$router.push()在JS中动态控制跳转；两者参数结构一致，选择取决于是否需运行时干预跳转时机。
声明式导航是在模板里用标签直接写跳转逻辑，比如 <router-link>；编程式导航是在 JavaScript 代码里调用方法实现跳转，比如 this.$router.push()。两者本质都触发路由变更，只是写的位置和适用场景不同。
声明式导航：模板中写链接，适合静态跳转
用 <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()，只是封装得更友好。
