需求：点击按钮跳转
编程式导航：利用js进行跳转，以前学js的时候就是根据location.href进行跳转||
第一种：path路径跳转
第二种
name命名跳转，
那我们之前，点击搜索，不仅仅是要跳转，还要传参
我们用既然要搜索，那么肯定要往输入框里放任意的值，所以放在data里创建一个数据
在事件函数里通过this模板字符串的方式去使用
那么怎么获取呢？
参数多了也可以用上述的写法，但是不方便，所以用对象的写法来写，所以完整的写法更适合传参
二、动态路由传参
name命名的编程式query传参写法
name命名的编程式动态路由传参
确实，路由跳转的方式看起来很多，容易记混。我来帮你**简化记忆**：
一句话总结
> **声明式** = 标签跳转（`<router-link>`）
> **编程式** = JS 代码跳转（`$router.push()` 等）
对比表格
| 类型 | 写法 | 使用场景 |
|------|------|----------|
| **声明式** | `<router-link to="/about">关于</router-link>` | 模板中的链接按钮 |
| **编程式** | `this.$router.push('/about')` | 登录成功后跳转、点击事件等 |
编程式导航的 4 种写法（其实只有 1 个核心）
```javascript
// 1. 字符串路径
this.$router.push('/search')
// 2. 路径对象
this.$router.push({ path: '/search' })
// 3. 命名路由（推荐）
this.$router.push({ name: 'search' })
// 4. 带参数
this.$router.push({ path: '/search', query: { key: 'abc' } })
this.$router.push({ name: 'search', params: { id: 123 } })
```
**核心记忆**：就记 `this.$router.push()`，里面的写法跟 `<router-link :to="...">` 一模一样。
其他常用编程式方法
```javascript
// 前进/后退
this.$router.go(1) // 前进1步
this.$router.go(-1) // 后退1步
this.$router.back() // 后退
// 替换当前历史记录（不能后退）
this.$router.replace('/search')
```
记忆技巧
> **声明式**：`<router-link>` 像 `<a>` 标签
> **编程式**：`$router.push()` 像 `window.location.href`
**不用背全部，记 `push` 就够了**，遇到需要 `replace`、`go` 时再查。
所以我们在做这种搜索跳转问题的时候，也就是编程式导航问题的时候
我们第一步要想到，是用path跳转还是name的方式跳转，；路径短用path
如果用path跳转时query方式传参，还是动态路由的方式传参，有多个参数的时候适合用query传参
编程式导航和声明式导航，都支持查询参数（query）和动态路由参数（params）两种传参方式。
但是，具体的语法写法 决定了你是否能使用 params 对象。
-
-
字符串语法：两者都支持（需要手动拼在 URL 中）。
-
对象语法：只有
name写法同时支持params和query；path写法只支持query，不支持params。
-
所以最稳妥、最推荐的做法是：使用 name + params + query，无论在声明式还是编程式导航中。