Vue Router - 数据传递

官方文档 Vue Router

1. 通过 path 传递

this.$router.push({path:`/user/${userId}`});
// this.$router.push(`/user/${userId}`);

注: 这样传递参数的话, 配置路由的时候需要在 path 上加参数: path: 'user/:userId'

这种接收参数的方式是

this.$route.params.userId

2. 通过 params 传递

// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }});

注: params 传参是针对 name 的

这种接收参数的方式是

this.$route.params.userId

3. 通过 query 传递

// 带查询参数，变成 /login?name=sxh
this.$router.push({ path: '/login/id', query: { name: 'sxh' }});

注: query 传参是针对 path 的

这种接收参数的方式是

this.$route.query.name