[JavaScript知识库]Vue路由传参

????????我们在开发 vue 项目的时候，会经常用到路由传参。下面来说说 vue 路由传参的三种方式。

1、通过 router-link 的 to 属性进行传参

//组件中
<template>
    <div>
        <router-link to="{path:'/home',query:{id:id}}">首页</rpiter-link>
    </div>
</template>


//路由
{
    path: '/home',
    name: 'Home',
    component: Home,
}


//接收id通过
this.$route.query.id

2、使用 query 进行传参

//通过点击事件
<div class="index" v-for="(item,index) in ke" :key="index" @click="go(item.id)">
</div>

//在methods接收
methods:{
    go(id){
        this.$router.push({
            path:'/home',
            name:'Home',
            params:{
                id:id
                }
        })
    }
}

//路由
{
    path: '/home',
    name: 'Home',
    component: Home,
}

//接收id
<script>
    export default {
        data(){
            return{
                id:""
            }
        },
        created(){
            this.id = this.$route.query.id
        }
    }
</script>

3、通过 params 进行传参

//通过设置点击事件进行跳转
<div v-for="(item,index) in list" :key="index" @click="godetail(item.id)">
</div>

//在methods出发函数
methods:{
    go(id){
        this.$router.push({
            name:'/detail',
            params:{
                id:id
            }
        })
    }
}


//接收
<script>
    export default {
        data(){
            return{
                id:""
            }
        },
        created(){
            this.id = this.$route.params.id
        }
    }
</script>

总结、?query 和params的区别

????????1.query要用path来引入，params要用name来引入

????????2.接收参数时，分别是this.$route.query.name和this.$route.params.name

????????3.query更加类似于ajax中get传参，而params类似与post，前者在浏览器的地址栏中显示，params不显示

????????4.params传值一刷新就没了，query传值刷新还存在。