【Vue】路由传参中的坑（query、params）

【Vue】路由传参中的坑（query、params）

路由传参主要有query、params两种参数传递方法。

this.$router.push(参数)

1.query传参

this.$router.push({path:'/路径',query:{userName:username,PassWord:password}})
//path处填上路径，一般会在路由配置文件里配置好
//query中存放的是一系列的需要传递的参数名和对应的值

前端的调用显示

let username= this.$route.query.userName;

实践证明

虽然query能将之前页面的信息通过路由的方式传递到新页面中，并且我的需求也实现了，能根据从之前页面传过来的参数，查询完显示在新页面。
但是，我发现传递的信息完全的暴露在地址栏上。
//如：地址？username=123456

于是，我查了资料，了解到了另一种传递参数的方式即params。
它们之间的区别可以简单的理解为

query ：相当于get请求，获取到的参数会在地址栏中显示
params ：相当于post请求，获取到的参数不会在地址栏中显示，但是params要配合name使用，这个name要在配置路由的时配置好。

2.params传参

this.$router.push({name:'userInfor',params:{userName:username,PassWord:password}});
///此处一定要注意，params要配合name使用，所以需要在路由配置中配置好。

//配置路由
{
    path: '/userInfor',
    name: 'userInfor',//与params配合使用
    component: resolve => require(['@/...../userInfor.vue'], resolve),
    //...中是具体的路径
    meta: {
      title: '用户信息',
    }

前端的调用显示，和query方式差不多

let username= this.$route.params.userName;

实践发现，params传参有个问题，利用params的方式获取的参数，虽然能够获取到数据，但是一旦进行对页面进行刷新，就获取不到参数了。

最后注意一下，传参用的是 router，接收参数用的是 route。