Vue 中路由传参（动态路由匹配）

一、解释

把数据从一个路由页面传递到另外一个页面的技术

这里列举了 params 和 query 的传参方式

二、案例

案例展示 手机列表页 传参到 手机详情页面（传递的是id）

① params 

1-1、在路由规则中设置接收参数（谁接收数据，就在谁的路由规则中设置）--这里详情页接收数据

 {
    path: '/Phone',
    name: 'Phone', 
    component: Phone 
  },
  {
    //   /:某某
    path: '/PhoneDetails/:phoneId', //接收数据的规则上设置接收参数
    name: 'PhoneDetails', 
    component: PhoneDetails 
  },

 1-2、发送数据 （父给子发）--通过事件触发

编程式：this.$router.push({name:"你要跳转的路由规则的name",params:{你配置的接收参数:"数据"}})

标签：<router-link v-bind:to="{name:"你要跳转的路由规则的name",params:{你配置的接收参数:"数据"}}"></router-link>

<script>
export default {
    methods: {
        //点击事件
        goLink(id) {
             this.$router.push({name:"PhoneDetails",params:{phoneId:id}})
            //这种 ``也可以
            // this.$router.push({
            //   path: `/PhoneDetails/${id}`,
            // })
        },
     },
}
</script>

1-3、接收数据   this.$route.params.xxx  （route 没有r） (详情也就是儿子接收)

<template>
  <div>
    <h3>我是详情页</h3>
    <h3>ID:{{this.$route.params.phoneId}}</h3>
  </div>
</template>

② query

2-1、发送数据 不需要路由上配置了 （两种格式）

this.$router.push({name:"你要跳转的路由规则的name",query:{接收参数:"数据"}})

this.$router.push({path:"你要跳转的路由的路径",query:{接收参数:"数据"}})

//query传参
// this.$router.push({name:"PhoneDetails",query:{phoneId:id}})

2-2、接收数据   ---- this.$route.query.xxx

<h2>id:{{this.$route.query.phoneId}}</h2> 

三、案例效果 -----注意看url路径的变化

 四、两者的区别

	params	query
用法上	params只能用name	可以使用 path 也可以使用 name 作为跳转路径
接收上	this.$route.params.xxx	this.$route.query.xxx
url 展示上	params url只有val 不显示key 相对来说安全一些	query 是 key=val ( query显示key相对来说不安全 )
效果上

五、$router与$route

$router : 他是vueRouter的全局对象，由于我们在vue对象里把vueRouter对象植入到根属性里，所以，在组件内部是可以使用$router拿到该对象的 (它里面包含了对路由全局操作的属性和方法)

$route: 就是一个路由对象 每一个路由都有一个route对象 也就是说他是类似于局部页面路由的一个对象,他只能处理当前路由页面的操作 ( 表示匹配到的当前路由对象 )

六、代码

phone.vue 

<template>
  <div class="phone">
    <div
      class="phone-item"
      v-for="(v, i) in arr"
      :key="i"
      @click="goLink(v.id)"
    >
      <div class="cont-tit">{{ v.tit }}</div>
      <div><img :src="v.img" /></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          id: '001',
          tit: '手机热销',
          img: 'https://shopstatic.vivo.com.cn/vivoshop/commodity/36/10007336_1650358109769_750x750.png.webp',
        },
        {
          id: '002',
          tit: '折扣手机',
          img: 'https://shopstatic.vivo.com.cn/vivoshop/commodity/36/10007336_1650358095399_750x750.png.webp',
        },
        {
          id: '003',
          tit: '热销手机',
          img: 'https://shopstatic.vivo.com.cn/vivoshop/commodity/11/10007411_1652682629904_750x750.png.webp',
        },
          {
          id: '004',
          tit: '活动手机',
          img: 'https://shopstatic.vivo.com.cn/vivoshop/commodity/75/10007475_1653651557950_750x750.png.webp',
        },
          {
          id: '005',
          tit: '二手手机',
          img: 'https://shopstatic.vivo.com.cn/vivoshop/commodity/09/10007209_1647845438443_750x750.png.webp',
        },
      ],
    }
  },
  methods: {
    goLink(id) {
        this.$router.push({name:"PhoneDetails",params:{phoneId:id}})
        //query传参
        // this.$router.push({name:"PhoneDetails",query:{phoneId:id}})
        // this.$router.push({
        //   path: `/PhoneDetails/${id}`,
        // })
    },
  },
}
</script>

<style scoped >
.phone-item {
  padding: 20px;
}
.phone-item {
  background-color: #ccc;
  margin-top: 15px;
}
.cont-tit {
  font-size: 14px;
  color: #3c3c3c;
  margin-bottom: 10px;
}
img {
  width: 60px;
  height: 60px;
}
</style>

phoneDetails.vue

<template>
  <div>
    <h3>我是详情页</h3>
    <h1 @click="goBack()">&lt;</h1>
    <h3>ID:{{this.$route.params.phoneId}}</h3>
    <!-- <h2>id:{{this.$route.query.phoneId}}</h2> -->
  </div>
</template>

<script>
export default {
    methods:{
        goBack(){
          this.$router.go(-1)
        }
    }
}
</script>