第一种:query(get传参)

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

                          

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

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

控制台输出:

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

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

  

                 在路径上传递属性值  

              

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

         控制台输出:

                ​​​​​​​        ​​​​​​​        

        

第三种:meta(路由元信息)

        在路由配置上传参:        

{

path:'/list',

name:'list',

meta:{

xxoo:'xxx' //路由元信息

},

},

在组件中获取;

控制台输出;

 第四种:porps传参

        路由配置项里面写:

props:{

name:'刘香',

id:'18岁123'

},

        组件中接收:

props:{

id:{

type:string,//约束参数类型

default:'默认参数',//忘记传参的情况下会使用默认参数

required:true

},

name:{

// 和上面的一样

type:String

}

}

        模板中 console.log(props)

        控制台中输出:

文章链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: