共计 1512 个字符，预计需要花费 4 分钟才能阅读完成。
Vue 路由传参的三种基本方式
现有如下场景，点击一个 button 按钮跳转到另外一个路由页面，并向目标路由页面传递参数，便于目标路由页面获取源页面传递的数据信息。源页面中：
<button @click=”gotoTargetView”> 点击跳转到目标路由 user 页面 </button>
方案一，通过调用 $router 对象的 push() 方法，向 push() 方法传递一个路由配置对象，通过 params 来传递参数
需要注意的是使用 params 必须和 name 属性一起使用，否则要跳转的目标路由页面无法通过 params 获取到传递过来的参数。
路由配置:
{
path: ‘/user’,
name: ‘user’,
component: User
}
methods:
gotoTargetView(){
this.$router.push({name:”user”, params:{userName:”lhb”}});// 注意 name 不能换成 path:”/user”
}
User.vue 组件:
this.$route.params.userName;//User.vue 组件中就可以通过 $route 的 params 获取到
方案二：通过调用 $router 对象的 push() 方法，向 push() 方法传递一个路由配置对象，需要通过 query 来传递参数
需要注意的是使用 query 的时候，可以通过 path 属性也可以通过 name 属性来指定目标路由。
这种情况下，query 传递的参数会显示在 url 后面?userName=?&，如:
http://localhost:8082/about?userName=lhb
对应路由配置：
{
path: ‘/user’,
name: ‘user’,
component: User
}
methods:
gotoTargetView(){
this.$router.push({name:”user”,query:{“userName”:”lhb”}});
this.$router.push({path:”/user”,query:{“userName”:”lhb”}});
}
User.vue 组件:
this.$route.query.userName;//User.vue 组件中就可以通过 $route 的 query 获取到
方案三：通过路由配置，配置动态路由参数
上面的路由配置都是严格匹配的，只有要访问的路径与路由配置中的 path 一模一样，才能跳转到相应的组件上. 但有时现实却不是这样的，当我们去访问网站并登录成功后，它会显示 欢迎你，+ 你的名字。不同的用户登录，只是显示 ” 你的名字 ” 部分不同，其它部分是一样的。这就表示，它是一个组件，假设是 user 组件。不同的用户（就是用户的 id 不同），它都会导航到同一个 user 组件中。这样我们在配置路由的时候，就不能写死, 就是路由中的 path 属性，不能写死，那要怎么设置? 导航到 user 组件，路径中肯定有 user, id 不同，那就给路径一个动态部分来匹配不同的 id. 在 vue-router 中，动态部分 以 : 开头，那么路径就变成了 /user/:id, 这条路由就可以这么写：{path:”/user/:id”, component: user}.
对应路由配置：
{
path: ‘/user/:userName’,
name: ‘user’,
component: User
}
methods：
gotoTargetView() {
this.$router.push({path:`/user/${userName}`});
}
User.vue 组件:
this.$route.params.userName;//User.vue 组件中就可以通过 $route 的 params 获取到
