详解Vue中一种简易路由传参办法

当我们使用Vue进行开发时，经常需要进行路由跳转和传参。路由传参可以方便我们在不同页面之间传递数据，实现页面之间的交互和通讯。本文将介绍一种简易的Vue路由传参方法，仅需使用Vue的内置方法即可实现。

一、Vue内置方法$router.push()

Vue内置了一个$router方法，可以用于进行路由跳转。在进行页面跳转的时候，我们可以利用这个方法进行路由参数的传递。

使用方法：

this.$router.push({
  name: 'pageName', // 跳转的页面名称
  params: {
      key1: value1, // 携带的参数1
      key2: value2 // 携带的参数2，可以继续添加
  }
})

其中name代表要跳转的页面名称，params中包含要传递的参数。params中的参数可以是任意类型，比如字符串、数字或者对象等。

二、获取路由参数

在目标页面中，我们可以通过访问$route.params.key的方式获取到传递过来的参数。具体方法如下：

使用方法：

mounted () {
  this.key1 = this.$route.params.key1
  this.key2 = this.$route.params.key2
}

当访问该页面时，这个mounted生命周期钩子函数会在页面渲染之前被调用。我们可以在里面定义key1和key2两个变量，并将它们赋值给$route.params.key1和$route.params.key2，从而获取到传递过来的参数。

下面是一个示例：

示例1：利用$router.push()进行路由传参

// 发送数据
this.$router.push({
  name: 'detail',
  params: {
    productId: 1,
    productName: '商品1'
  }
})

在发送数据时，我们使用$router.push()方法进行路由跳转，并且在params中携带了我们要发送的参数。

// 接收数据
<template>
  <div>
    <h1>{{ productDetail.productName }}</h1>
    <p>商品ID：{{ productDetail.productId }}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      productDetail: {}
    }
  },
  mounted () {
    this.productDetail.productId = this.$route.params.productId
    this.productDetail.productName = this.$route.params.productName
  }
}
</script>

在接收数据的页面，我们可以使用this.$route.params获取传递过来的参数。在mounted生命周期函数中，我们将获取到的参数赋值给了productDetail对象，从而在页面中展示出来。

示例2：利用$router.push()进行路由传参，并通过遍历展示数据

// 发送数据
this.$router.push({
  name: 'list',
  params: {
    productList: [
      { id: 1, name: '商品1' },
      { id: 2, name: '商品2' },
      { id: 3, name: '商品3' }
    ]
  }
})

在发送数据时，我们使用$router.push()方法进行路由跳转，并且在params中携带了我们要发送的参数。

// 接收数据
<template>
  <ul>
    <li v-for="item in productList" :key="item.id">
      <router-link :to="{ name: 'detail', params: { productId: item.id, productName: item.name } }">{{ item.name }}</router-link>
    </li>
  </ul>
</template>
<script>
export default {
  data () {
    return {
      productList: []
    }
  },
  mounted () {
    this.productList = this.$route.params.productList
  }
}
</script>

在接收数据的页面，我们首先将productList数组定义在data中，并将其初始化为空。在mounted生命周期函数中，我们将获取到的参数赋值给productList数组，从而获取到了传递过来的商品列表数据。

接着，我们使用v-for指令对productList进行遍历，并利用router-link将每个商品的名称包装成一个链接，链接的目标是商品详情页detail。在链接中，我们使用to属性指定了将要传递的商品ID和名称。

最后，我们在商品详情页detail中根据传递过来的商品ID和名称进行展示。

以上就是利用$router.push()进行路由传参的方法和示例，这种方法简单易行，代码简洁，适合用于小型项目和简单页面。