vue中动态路由传递参数

1.params类型

1.在配置路由时，在路径后声明变量

const routes = [
    {
    path:/user/test/:id,
    component:User
    }
]

 

2.传递参数：只需要在路由跳转时，在路径相应位置写入对应值即可

 使用router-link标签进行路由跳转时

<router-link :to="'/user/'+1">用户</router-link>

 使用代码进行路由跳转时

methods:{
    userClick(){
    
        this.$router.push("'/user/'+1")
    }

}

3.接收数据

使用this.$route.变量名获取传递过来的数据

this.$route.id

2.query类型

1.使用router-link标签进行路由跳转时

<router-link :to="{path:'/user',query:{name:'zhangsan',id:3}}">用户</router-link>

2.使用代码进行路由跳转时

methods:{
    userClick(){
        this.$router.push({
        path:'/user',
        query:{
            name:'zhangsan',
            id:3
            }
        })
    }

}

3.接收数据

使用this.$route.query获取传递过来的数据

this.$route.query.name
this.$route.query.id