VUE路由传参方式

VUE路由传参方式

第一种：用query传参

HTML方式：

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

JS方式：

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

取值：

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

第二种：用params传参

HTML方式：

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

JS方式：

    methods: {
        gotoPath(){
            this.$router.push({
                name:"userInfo",
                params:{
                    id:this.id
                }
            })
        }
    }

取值：

    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",
    
    }
]