vue路由传参

路由传参（可分为三步进行）

1.在路由表中（router---index.js）的目标路由上进行参数配置-----类似于function中的“形参”

{
// 第一步 要在路由表中的目标路由进行参数配置
      path: '/detail/:id', 
      component: Detail
 }

2.哪个组件要进行跳转就去目标路由中的<router-link>中特有属性 “to” 上进行真实数据的传递 ---类似于function中的“实参”

//第二步 去<router-link>中特有的属性“to”上传递数据
<router-link :to="'/detail/' + item.id " >{{ 内容 }}</router-link>

3.要在目标组件中去--接收传递过来的具体是数据，然后根据传递过来的数据进行ajax请求或其他的逻辑处理

// 第三步 通过$route进行参数的接收
let { id } = this.$route.params

传参的三种基本方式

第一种：字符串的拼接

// 传递方式
<router-link :to="'/user/' + item.id " v-for="(item, index) in userList" :key="index">{{ 内容 }}</router-link>
// 接收方式
this.$route.params

第二种：path和query

// 传递方式
<router-link :to="{ path: '/user', query: { userId: item.id } }" v-for="(item, index) in userList" :key="index">{{ 内容 }}</router-link>
// 接收方式
this.$route.query

第三种：name和params

// 传递方式
<router-link :to="{ name: 'User', params: { userId: item.id } }" v-for="(item, index) in userList" :key="index">{{ 内容 }}</router-link>
// 接收方式
this.$route.params

query和params的区别：

• 地址栏的展现形式不同

query：?key=value
params:：/value

• 接收方式不同

query：this.$route.query
params:this.$route.params

• 使用的场景不同

query一般用在搜索
params一般用在详情页