vue路由传参梳理

前言

vue路由传参有两种类型，query，params，这篇文章梳理一下。

一、query

1 传参

1.1 声明式

<router-link :to="{ path:"/userInfo"},query:{ id:id }"></router-link>
// 或者
<router-link :to="{ name:"userInfo"},query:{ id:id }"></router-link>

1.2 编程式

data(){
    return {
        id:"banana"
    }
},
methods:{
    clickFunction(){
        this.$router.push({
            path:"/userInfo",
            query:{
                id:this.id
            }
        })
        // 或者
        this.$router.push({
            name:"userInfo",
            query:{
                id:this.id
            }
        })
    }
}

2 取值

created(){
    this.$route.query.id
}

二、params

1 传参

1.1 声明式

<router-link :to="{ name:"userInfo", params:{ id:id }}"></router-link>

1.2 编程式

data(){
    return {
        id:"banana"
    }
},
methods:{
    clickFunction(){
        this.$router.push({
            name:"userInfo",
            params:{
                id:this.id
            }
        })
    }
}

2 取值

created(){
    this.$route.params.id
}

三、区别

• query类似于get请求，参数会暴露在url地址栏中(问号+键值对)
• query可以配合name与path使用。
• params类似于post请求，不会暴露在url上，刷新页面会丢失传递的参数。

• params只能配合name使用，如果提供了path,params会失效。

params想要实现刷新页面不影响传参，需要在路由里修改路径
冒号+字段::id的格式

var routes = [
    {
        name:"userInfo",
        path:"/userInfo/:id",
    
    }
]