Vue---Vue路由传参(动态路由方式、query方式、params方式)

动态路由传参

路由配置：

{
  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;

    //进行网络请求...
}

 

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;

    //进行网络请求...
}

 

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;

    //进行网络请求...
}