路由传参的几种方式（含params、query）

前言：路由传参在vue项目中是很常用的
让我们用最简单的方法理解下3种路由的传参方式

先看一下用到到文件 有哪些

第一种 布尔值传参

1.需要在router文件夹中的index文件 配置路由

{
    //布尔值传参
    path:'/A/:id', //布尔值传参这里必须要写成动态路由的格式
    props:true,
    component:()=>import('@/views/A.vue')
  }

2.在App.vue中配置路由跳转
里面的aa是参数，也就是最后传过去的东西

<router-link to="A/aa">A</router-link> |

3.在A.vue组件中接收传入的参数
有两种接收方式

	第一种

<template>
    <div>
        我是A路由
        {{this.$route.params.id}}
    </div>
</template>

第二种（推荐使用）

<template>
    <div>
        我是A路由
        我是传过来的参数{{id}}
    </div>
</template>
<script>
export default ({
    props:['id']
})
</script>

第二种 对象传参

他跟布尔传参的区别在与 他是对象格式的
1.在index.js中配置路由

{
    //对象传参
    path:'/A',
    props:{
      name:"我是对象传参"
    },
    component:()=>import('@/views/A.vue')
  }

2.在App.vue中配置路由跳转

<router-link to="/A">A</router-link> |

3.在A.vue中接收

<template>
    <div>
        我是A路由
        {{name}}
    </div>
</template>
<script>
export default ({
    props:{
	name:{
		type:String, //约束类型
		default:"默认参数", //默认参数
		required:true //必须传参
	}
}
})
</script>

params传参

params只能通过name来传参
他传递的参数名称不会在浏览器上显示出来
步骤：
1.在index.js中配置路由

  {
    path: '/A/:id',
    name: 'A',
    component:()=>import('@/views/A.vue')
  }

2.在App.vue中配置跳转和传入参数

<router-link :to="{name:'A',params:{id:18}}">A</router-link> |

3.在A.vue中接收
注意:是route不是router

<template>
    <div>
        我是A路由
        {{this.$route.params.id}}
    </div>
</template>

结果图：
他不会显示你的参数名称

query传参

他直接就可以传参不需要去路由中配置参数
他的参数名称会在url地址上显示出来
1.在App.vue中传参数

<router-link :to="{name:'A',query:{id:'我是query参数'}}">A</router-link> |

2.在A.vue中接收参数

<template>
    <div>
        我是A路由
        {{this.$route.query.id}}
    </div>
</template>

结果图：
他会显示你的参数名称

指定跳转到某个路由

前面正常配置路由就可以
然后在A.vue组件中写以下代码就可以跳到指定的B组件

<template>
    <div>
        我是A路由
        <button @click="aa">点击跳转到B路由</button>
    </div>
</template>
<script>
export default ({
methods:{
    aa(){
    this.$router.push(
           {
               path:'/B' ,query: { id: '我是B' } 
            }
    )
    }
}
})
</script>