花卉网站建设的总结与,广东新闻联播直播今天回播,邯郸网站设计公司排名,泉州网站制作运营商专业一、情景说明
路由组件间#xff0c;传递参数时#xff0c;更优雅的写法 Vue3的写法和Vue2的写法基本相似#xff0c;就是接收参数的组件#xff0c;略有不同 Vue2的写法#xff1a;https://blog.csdn.net/Brave_heart4pzj/article/details/136283870
二、案例
1、传参…一、情景说明
路由组件间传递参数时更优雅的写法 Vue3的写法和Vue2的写法基本相似就是接收参数的组件略有不同 Vue2的写法https://blog.csdn.net/Brave_heart4pzj/article/details/136283870
二、案例
1、传参时的路由配置
1、布尔值写法
将路由收到的所有params参数作为props传给路由组件此种配置无法处理query传参
const router createRouter({history:createWebHistory(), //路由器的工作模式稍后讲解routes:[ //一个一个的路由规则{name:zhuye,path:/home,component:Home},{name:xinwen,path:/news,component:News,children:[{name:xiang,path:detail/:id/:title/:content?,component:Detail,props:true}]},{name:guanyu,path:/about,component:About}]
})2、函数式写法功能最强大
const router createRouter({history:createWebHistory(), //路由器的工作模式稍后讲解routes:[ //一个一个的路由规则{name:zhuye,path:/home,component:Home},{name:xinwen,path:/news,component:News,children:[{name:xiang,path:detail,component:Detail,props(route){return route.query}}]},{name:guanyu,path:/about,component:About}]
})2、接收参数的组件配置
templateul classnews-listli编号{{id}}/lili标题{{title}}/lili内容{{content}}/li/ul
/template
script setup langts nameAboutdefineProps([id,title,content])
/script
