vue 路由传参params和query

大家都知道vue的路由传参有两种query和params，但是前面的是用name还是用path，也许大家容易记混了，今天来帮大家梳理下

1：首先看来query

   1.1： path:

 <li @click="goHrefQuery('/index2')">子组件index2</li> 

goHrefQuery(pageIndex){
    this.$router.push({path:pageIndex,query:{FirstName:'chen'}})  
 },

     然后去控制台打印    this.$route.query.FirstName ，没问题，浏览器地址栏也会有参数显示  

      

 1.2：name

goHrefQuery(pageIndex){
  this.$router.push({name:pageIndex,query:{FirstName:'chen'}})  
},

    我们发现控制台报错说这个name不存在，

然后我们去路由配置的js去修改name ，在index2前面添加一个斜杠，然后在运行就不会报错

 {
     path: '/index2',
     name:'/index2',
     component: resolve => require(['@/components/index2'],resolve)
 },

所以总结以上信息：如果router/index 里面的path和name是一样的话再用query，用path和name是一样的效果，并且在浏览器上面可以显示传参的参数，类似于get请求，

2：再看来params

 2.1：name

 <li @click="goHrefParams('index3')">子组件index3</li>

 goHrefParams(pageIndex){
     this.$router.push({name:pageIndex,params:{FirstName:'chen'}})
 },

 mounted(){
    this.FirstName = this.$route.params.FirstName ;
    console.log(  this.FirstName)
  },

可以看到输出也是没问题的，但是浏览器上面没有显示传参的过程 ，有点类似于post

2.2：path

打印输出this.$router.params会发现输出为{}，说明不成功，

总结为：params和name配对，且传值不会在浏览器上显示类似于post