4种路由传参方法

第一种：query(get传参)

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

在组件中接受参数：引入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传参也叫动态路由传参

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

在路径上传递属性值

在组件中接收参数：引入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>

控制台输出：

第三种：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)

控制台中输出：

猜你喜欢