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

蔚落 2022-12-01 11:58 255阅读 0赞

## 动态路由传参 ##

**路由配置：**

{
      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;
    
        //进行网络请求...
    }