编程式导航-基本跳转

---

点击跳转按钮他是如何实现跳转的呢？

编程式导航：用js代码来进行跳转

• 在Vue单页面应用的时候，我们不能使用location.href来进行跳转了

---

• 那么在Vue中使用路由，如何使用编程式导航来实现跳转呢？

两种语法：

1. path路径跳转 → this.$router.push('路由路径')
2. name 命令路由跳转

---

①

path路径跳转

通过监听点击事件，触发goSearch函数 
methods: {goSearch () {// 通过路径的方式跳转// (1) 简单的写法// this.$router.push('路由路径')// this.$router.push('/search')// (2) 完整的写法// this.$router.push({//   path: '路由路径'// })this.$router.push({path: '/search'})}}

---

②

name命令路由跳转

适合长路径的使用

提前给我们需要跳转的路径创建一个名字 
{ name: 'search', path: '/search/:words?', component: Search },// 2. 通过命令路由的方式 跳转  （前提条件，给路由取名字）// this.$router.push({//   name: '路由名'// })this.$router.push({name: 'search'})

总结：编程式导航的两种跳转方式：

1. 通过路径跳转（简易方便）

   this.$router.push('路径名')

2. 通过路由的名字跳转 (适合路径名字长的场景)

​ {name: '路径名'，path: 'path/xxx'}

​ this.$router.push({

​ name: ‘路由名’

})

---

编程式导航-路由传参

---

我们带着问题学习

问题：我们浏览器搜索的时候如何携带我们的输入框的值传参？

---

路由的两种传参方式：查询参数 + 动态路由传参

---

路由的两种跳转方式： path（路径跳转传参） 和 name （命名路由跳转传参）

---

① 使用path路径跳转传参（query传参 或者 动态路由传参）

1. path跳转（通过query传参） query接收

简写  （使用 this.$route.query.key）接收
this.$router.push(`/search?key=${this.inpValue}`);完整的写法： （使用this.$route.params.words）接收
this.$router.push({path: '/search',query: {key: this.inpValue}})

2. path跳转（通过动态路由传参） params接收

简写  （使用 this.$route.query.key）接收this.$router.push(`/search/${this.inpValue}`)完整写法：（使用this.$route.params.words）接收this.$router.push({path: `/search/${this.inpValue}`})

---

②使用name命名路由跳转传参（query传参 或者 动态

---

1. path 路径跳转传参

使用query传参 （使用 this.$route.query.key）接收this.$router.push({name: 'search',//query传参query: {key: this.inpValue}})使用params传参：（使用this.$route.params.words）接收this.$router.push({name: 'search',//params传参params: {words: this.inpValue}})

---

总结：

1. 路由跳转分为：path路径传参和name命名路由传参

• path跳转传参：一种是query，一种是动态路由传参（需要配置路由）

---

• name 命令路由跳转传参：一种是query传参，一种是params

​ query就是query配置项传参

​ 动态路由跳转传参就是params配置项传参

---

• 根据不同的场景选择不同的跳转方式 和传参方式