4种路由传参方法

第一种：query(get传参)

    传递参数：在路经上直接利用问号传参，多个参数用&隔开      

                      ![](https://img-blog.csdnimg.cn/30f8541c49fb4f3aafe2b0526120b9f7.png)

在组件中接受参数：引入useRoute这个API来获取

也可以使用vue2中方法来获取：{{ $route.query.id }}

<template>
    <div id="home">
        <button @click="add">dian</button>
        {{ $route.query.id }}
    </div>
</template>
<script>
import {useRoute} from 'vue-router'
export default {
    setup(){
        var route = useRoute()
        function add(){
             console.log(route.query);
        }
        return {
            add
        }
    }
}
</script>

控制台输出：

** 第二种：params传参也叫动态路由传参**

    传递参数：在配置路由信息上传属性名

             在路径上传递属性值  

          ![](https://img-blog.csdnimg.cn/71803810bfd043138573eea44599392b.png)

     在组件中接收参数：引入useRoute这个API来获取

<template>
    <div id="list">
        <h1>列表页面</h1>
        {{$route.params}}
    </div>
</template>
<script>
import {useRoute} from 'vue-router'
export default {
    setup(props){
        var route  = useRoute()
        console.log(route.params)
        return{
            route
        }
    },
}
</script>

     控制台输出：

            ​​​​​​​        ​​​​​​​        ![](https://img-blog.csdnimg.cn/3f0d79c9a23a4df38f60a5fdf8f89ccf.png)

    

第三种：meta（路由元信息）

    在路由配置上传参：        

{
    path:'/list',
    name:'list',
    meta:{
        xxoo:'xxx'  //路由元信息
    },
},

在组件中获取;

<template>
    <div id="list">
        <h1>列表页面</h1>
        {{$route.meta}}
    </div>
</template>
<script>
import {useRoute} from 'vue-router'
export default {
    setup(props){
        var route  = useRoute()
        console.log(route.meta)
        return{
            route
        }
    },
   
}
</script>

控制台输出;

** 第四种：porps传参**

    路由配置项里面写：

props:{
            name:'刘香',
            id:'18岁123'
        },

    组件中接收：

props:{
        id:{
            type:string，//约束参数类型
            default:'默认参数'，//忘记传参的情况下会使用默认参数
            required:true
        }，
        name:{
            // 和上面的一样
            type:String
        }
    }

    模板中 console.log(props)

    控制台中输出：