vue-router路由跳转的传参方式

（1）动态路由传参

//在路由配置文件中-配置动态路由
{
path: '/Home/:id',
name: 'Home',
component: Home
}
//跳转时
let id = 1;
this.$router.push('/Home/' + id)
//跳转后参数接收：
this.$route.params.id

（2）通过query属性传参

//在路由配置文件中-配置
{
path: '/Home',
name: 'Home',
component: Home
}
//页面跳转时
this.$router.push({
path: '/Home',
query: {
name: '苹果'，
id: 1,
}
})
//页面跳转后参数接收：
this.$route.query

（3）通过params传参 

注：需要在路由中定义name属性然后再利用name属性跳转

//路由配置文件中-配置
{
path: '/Home',
name: 'Home',
component: Home
}
//跳转时页面
this.$router.push({
name: 'Home', //定义name属性
params: {
name: '苹果'，
id: 1,
}
})
//页面跳转后获取参数对象接收：
this.$route.params

（4）search传参 （字符串拼接方式传参）

在url?后面进行传参，多个参数之间用&连接
语法：url?参数名=参数值&参数名=参数值 
参数接收：$route.query

路由传参query和params的区别

1.params只能用name来引入路由，query用path/name来引入

2.params类似于post，query更加类似于我们ajax中get传参，再简单一点，params在浏览器地址栏中不显示参数，query会显示在浏览器地址栏显示参数，所以params传值相对安全一些。

3.取值用法类似都是通过this.$route.params.name和this.$route.query.name。

4.params传值一刷新就没了，query传值刷新还存在