Vue： 编程式导航的跳转 和 传参

编程式导航-基本跳转

---

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

编程式导航：用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配置项传参

---

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