页面间传值方法及问题

[lulujianglab]

在vue中官网中我们可以看到两种页面间传值得方法：query和params

query 跳转URL携带参数

首先在路由文件中定义类似的如下路由

{
      path:"/user",
      name:"user",
      component:user
    }

然后在页面中定义跳转路径和传值参数

this.$router.push({path:'/user',query:{userName:'ls',userId:'02'}});

我们已经了解了query传参会将参数都放到url中，所以当传递的值比较多的情况下，跳转的url会太长而受限制（取决于浏览器和服务器的限制）

所以只建议在参数较少的情况下使用query传值

params

参数不带入url中，可在参数较多时使用

同样的先在路由文件中定义类似的如下路由

{
      path:"/user",
      name:"user",
      component:user
    }

然后在页面中定义跳转路径和传值参数

this.$router.push({path:'/user',query:{userName:'ls',userId:'02'}});

问题来了，如果我们打印下面代码，结果肯定是 undefined

console.log(this.$route.params.userName )

注意，这是因为使用params传值，只能用name来引入路由，可见官网

正确的写法

this.$router.push({name:'user',query:{userName:'ls',userId:'02'}});

问题又来了，如果我们刷新页面，参数就不见了

注意，用params携带参数时，在注册