Vue路由传参query和params的区别

注意：

使用query传参的时候，name,path都可以引入，但使用params传参的时候只能使用name进行引入。接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name
 进行路由跳转的时候，我们使用this.$router.push（‘路径'）
 query更加类似于我们ajax中get传参，params则类似于post,前者在浏览器地址栏中显示参数，后者则不显示 

 1.动态路由传参

 路由配置：

{
  path: '/update/:uid/:name',    //uid参数、name参数
  name: 'Update',
  component: () => import('@/views/update.vue'),
  children : []
};
 

路由跳转：

this.$router.push('/update/111/xiaoming');    //如果没有添加对应参数，页面出现404，不会到达对应页面

在对应页面中拿到路由参数进行网络请求：  

mounted(){
    let id = this.$route.params.uid;
    let name = this.$route.params.name;
 
    //进行网络请求...
}

2.query方式传参

路由配置： 

{
  path: '/update',    
  name: 'Update',
  component: () => import('@/views/update.vue'),
  children : []
};
 

路由跳转(两种方式)： 

this.$router.push({
    path : '/update',        //方式1：通过path跳转
    query : {
        uid : 111,
        name : 'xiaoming'
    }
})
 
 
this.$router.push({
    name : 'Update',        //方式2：通过name跳转
    query : {
        uid : 111,
        name : 'xiaoming'
    }
})

 在对应页面中拿到路由参数进行网络请求：

mounted(){
    let id = this.$route.query.uid;
    let name = this.$route.query.name;
 
    //进行网络请求...
}

3.params方式传参

 路由配置：

{
  path: '/update',    
  name: 'Update',
  component: () => import('@/views/update.vue'),
  children : []
};
 

路由跳转(只有一种方式)：

this.$router.push({
    name : 'Update',        //只能通过name跳转
    params : {
        uid : 111,
        name : 'xiaoming'
    }
})

在对应页面中拿到路由参数进行网络请求：
 

mounted(){
    let id = this.$route.params.uid;
    let name = this.$route.params.name;
 
    //进行网络请求...
}