# 传参方式
- 页面式（html）标签路由跳转传参 ----- router-link（其实就是a标签）
- js编程式路由跳转 ----- this.$router.push() // params query
- 路由组件传参 ----- 在路由配置中用分号拼接参数
# 获取参数
- this.$router.params ----- 搭配路由的name属性，参数作为路由的一部分，不会在url显示
- this.$router.query ----- 使用path来匹配路由，可以在url看到？后面的就是传递的参数
# 一、router-link
<router-link :to="{path:'/news/detail',query:{id:1}}">详情</router-link>
1
使用path + 路径，query + 参数。则用this.$route.query.id取值。
<router-link :to="{name:'newsDetail',params:{id:1}}">详情</router-link>
1
使用name +路由名称，params + 参数。则用this.$route.params.id取值。
# 二、this.$router.push() ----- key,value键值对的形式
- query 显示在url
// 传参
sendData(){
this.$router.push({
path: './describe',
query: {
id:id,
title:title
}
})
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
// 接收参数
this.$route.query.id
this.$route.query.title
1
2
3
2
3
- params 不会显示在url
// 传参
sendData(){
this.$router.push({
name: './describe',
params: {
id:id,
title:title
}
})
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
// 接收参数
this.$route.params.id
this.$route.params.title
1
2
3
2
3
# 三、路由组件传参
- 路由部分：
let routes = [
{
path: '/news',
name: 'news',
props: true,
meta: {},
component: () => import('@/page/news.vue')
},{
path: '/newsDetail/:id',
name: 'newsDetail',
props: true,
meta: {},
component: () => import('@/page/newsDetail.vue')
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
path后面跟占位符，props设置为波尔类型，true。跳转页面时使用this.$router.push传参。
下面是取值的方式
export default {
name: 'HelloWorld',
data () {
return {
msg: '123
}
},
props:['id'],
mounted(){
console.log(this.$route.params.id, this.id)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
取值时，方法1：可以直接使用this.$route.params.id取值。
方法2：也可以先放到props中，就可以直接用this.id拿到了。