Vue路由传参的3种形式

末蓝、 2023-06-06 08:13 96阅读 0赞

在列表向详情页面跳转，而后在详情页面查看列表的详情信息，此时设计路由传参，vue中有3种传参形式，介绍如下：

  1. <div class="action-btn" @click="viewDetails(item.id)">查看详情</div>

一、path形式

  1. methods：{
  2.   viewDetails(id) {
  3.        //直接调用$router.push 实现携带参数的跳转
  4.         this.$router.push({
  5.           path: `/particulars/${id}`,
  6.         })
  7. }

此方法，会将参数直接拼接在URL上面，需要在路由文件中配置动态路由，具体的配置如下：

  1. {
  2.      path: '/orderDetails/:id',
  3.      name: 'orderDetails',
  4.      component: orderDetails
  5. }

另外，在详情页面orderDetails.vue中可以通过 this.$route.params.id 来获取传递的参数，具体如下：

  1. created(){
  2.     this.orderId = this.$route.params.id;
  3. }

二、name + params形式

  1. methods：{
  2.   viewDetails(id) {
  3.        this.$router.push({
  4.           name: 'orderDetails',
  5.           params: {
  6.             id: id
  7.           }
  8.         })
  9.   }

此方法，不会将参数直接拼接在URL上面，在路由配置的时候，不需要使用动态路由配置，具体如下：

  1. {
  2.      path: '/orderDetails',
  3.      name: 'orderDetails',
  4.      component: orderDetails
  5.    }

另外，在详情页面orderDetails.vue中可以通过 this.$route.params.id 来获取传递的参数，具体如下：

  1. created(){
  2.     this.orderId = this.$route.params.id;
  3. }

缺点：页面刷新会产生数据丢失的问题。

三、path + query形式

  1. methods：{
  2.   viewDEtails(id) {
  3.         this.$router.push({
  4.           path: '/orderDetails',
  5.           query: {
  6.             id: id
  7.           }
  8.         })
  9.   }

此方法，会将参数拼接到URL上面，并且使用 key=value 的形式，对应的路由不需要配置成动态路由，具体如下：

  1. {
  2.      path: '/orderDetails',
  3.      name: 'orderDetails',
  4.      component: orderDetails
  5.    }

另外，在详情页面 orderDetails.vue 中可以通过 this.$route.query.id 来获取传递的参数，具体如下：

  1. created(){
  2.     this.orderId = this.$route.query.id;
  3. }

四、总结对比

20191010170418894.jpg

发表评论

表情：
评论列表 （有 0 条评论，96人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue路由传参

    前言 之前，查了其他博客，总结一篇,发现貌似不对？？，因此又查了一遍好不容易写了出来。 1.query传参 一种是，这样滴。 // 跳转 thi

    水深无声水深无声/ 0 赞/ 211 阅读

    相关 Vue路由传参的几种方式

    前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数

    小咪咪小咪咪/ 0 赞/ 629 阅读