Vue Router 的params和query传参的区别

首先简单来说明一下: router和route的区别

router : 是路由操作对象，只写对象，route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

1·跳转方式：query传参，使用name，path跳转;params只能用name跳转

//query传参，使用name跳转
this.$router.push({
    name:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参，使用path跳转
this.$router.push({
    path:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//params传参 使用name
this.$router.push({
  name:'second',
  params: {
    id:'20180822',
     name: 'query'
  }
})

2.接收参数

//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;

//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;

3.路由

//query
{
path: '/second',
name: 'second',
component: () => import('@/view/second')
}

//params
{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}
或者
//刷新后得不到数据,不建议使用
{
path: '/second',
name: 'second',
component: () => import('@/view/second')
}