vue中路由传参

概念： vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。

一：params传参

params 传参又可分为 声明式 和 编程式 两种方式

1.声明式 ,该方式是通过 router-link 组件的 to 属性实现，该方法的参数可以是一个字符串路径或者一个描述地址的对象。使用该方式传值的时候，需要子路由提前配置好参数，例如：

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由组件
进入Child路由

1
2
3
4
5
6
7
8

2.编程式路由，使用该方式传值的时候，同样需要子路由提前配置好参数，例如：

//子路由配置
{
  path: '/child/:id',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    path:'/child/${id}',
})

1
2
3
4
5
6
7
8
9
10

二：params传参

params传参也可分为 声明式 和 编程式 两种方式，与方式一不同的是，这里是通过路由的别名 params进行传值的

1.声明式，该方式也是通过 router-link 组件的 to 属性实现，例如：

进入Child路由
1

2.编程式，使用该方式传值的时候，同样需要子路由提前配置好参数，例如：

//子路由配置
{
 // params 需要占位
  path: '/child/:id',
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    params:{
    	id:123
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

三：query传参

query 传参（显示参数）也可分为 声明式 和 编程式 两种方式

1.声明式，该方式也是通过 router-link 组件的 to 属性实现，不过使用该方式传值的时候，需要子路由提前配置好路由别名（name 属性），例如：

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由组件
进入Child路由

//在child组件中获取路由传过来的参数参数
{{$route.query.id}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.编程式使用该方式传值的时候，同样需要子路由提前配置好路由别名（name 属性），例如：

//子路由配置
{
  path: '/child,
  name: 'Child',
  component: Child
}
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    query:{
    	id:123
    }
})

//在child组件中通过以下代码来获取参数
this.$route.query.id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16