vue路由传参

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

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

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

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

//第二步 去中特有的属性“to”上传递数据
{{ 内容 }}

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

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

传参的三种基本方式

第一种：字符串的拼接

// 传递方式
{{ 内容 }}
// 接收方式
this.$route.params

第二种：path和query

// 传递方式
{{ 内容 }}
// 接收方式
this.$route.query

第三种：name和params

// 传递方式
{{ 内容 }}
// 接收方式
this.$route.params

query和params的区别：

• 地址栏的展现形式不同

query：?key=value
params:：/value

• 接收方式不同

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

• 使用的场景不同

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