Vue里的路由传参

概述

  vue里的路由传参方式按照原理上划分大致可以分为两大类：params传参和query传参，但由于路由导航的方式又划分为链接式导航与编程式导航，所以在形式上比较复杂。

实例

利用模板字符串拼接路径传参

路由配置

{
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
}

路由导航

this.$router.push({
          path: `/detail/${id}`
      })

或

<router-link
        :to="'/detail/' + id"
        tag="li"
        v-for="id in 5"
        :key="id"
        >
        我是第{{ id }} 条信息
      </router-link>

获取参数

this.id = this.$route.params.id

实际上也是params传参的一种方式，只不过利用ES6提供的多行字符串简化了配置params的过程，同时路由配置也发生了一些变化

params传参

路由配置

{
      path: '/detail',
      name: 'Detail',
      component: Detail
}

路由导航

this.$router.push({
      name: 'Detail',
      params: {
          id
      }
})

或

<router-link
        :to="{ name: 'Detail', params: {id}}"
        tag="li"
        v-for="id in 5"
        :key="id"
        >
        我是第{{ id }} 条信息
</router-link>

参数获取

this.id = this.$route.params.id

params设置路由只能用name属性来设置，不可以用path属性设置

query传参

路由设置

{
      path: '/detail',
      name: 'Detail',
      component: Detail
}

路由导航

 this.$router.push({
            path: 'detail',
          //name: 'Detail',
      query: {
          id
      }
})

或

<router-link
        :to="{ name: 'Detail', query: {id}}"
        tag="li"
        v-for="id in 5"
        :key="id"
        >
        我是第{{ id }} 条信息
</router-link>

参数获取

this.id = this.$route.query.id

配置方式基本与params一样，但query参数会显示在url上，并且path，name属性均可配置路由导航