vue 路由传参 params 与 query两种方式的区别

vue 路由传参 params 与 query两种方式的区别

在使用vue进行路由传参的时候我们将常会用到params和query两种形式，两者是有区别的啊，大家在使用的过程中千万要注意哦

params传参

在路由中假设我们这么定义

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

在进行页面跳转传参的时候我们采用这样的形式是拿不到参数的

this.$router.push({
 path:"/login",
 params:{
 token:'5201314'
 }
});

取值时候

this.$route.params.token         //undefined

打印结果就是undefined，那是因为params传参只能用name来引入路由，不能用path,我们应该这样写

this.$router.push({
   name:"login",
   params:{
    token:'5201314'
 }
});

这样就可以正确的获取到值了，平时在使用的时候要注意了，如若是path引入的话，此时params传参会被忽略，因此获取不到传入的值，params要用name引入，接受参数的方式基本一致

this.$route.params.token  
this.$route.query.token  

query类似于我们ajax的get传参，会在地址栏显示参数，而params则类似于post，不会显示