织梦wap网站模板,冒用网站备案号建设网站,河南省建筑市场一体化平台,电商推广是什么意思作用#xff1a;让路由组件更方便的收到参数#xff08;可以将路由参数作为props传给组件#xff09;
{name:xiang,path:detail/:id/:title/:content,component:Detail,
第一种方法#xff1a;// props的对象写法#xff0c;作用#xff1a;把对象中的每一组key-valu…作用让路由组件更方便的收到参数可以将路由参数作为props传给组件
{name:xiang,path:detail/:id/:title/:content,component:Detail,
第一种方法// props的对象写法作用把对象中的每一组key-value作为props传给Detail组件// props:{a:1,b:2,c:3},
// props的布尔值写法作用把收到了每一组params参数作为props传给Detail组件// props:true第二种方法// props的函数写法作用把返回的对象中每一组key-value作为props传给Detail组件props(route){return route.query}
}
路由规则的props 的写法
第一种写法在路由上props:true 只支持 params 的形式
{name:xinwen,path:/news,component:News,children:[{name:xiang,path:detail/:id/:title/:content?,component:Detail,// 第一种写法 // 第一种写法将路由收到的所有params参数作为props传给路由组件props:true, }]},第二步在Detail.vue 页面中templateul classnews-listli编号{{ id }}/lili标题{{ title }}/lili内容{{ content }}/li/ul/templatescript setup langts nameAboutdefineProps([id,title,content]) // 执行这个defineProps 中包括的参数/script
第二种方法支持query 模式
// 第二种写法函数写法可以自己决定将什么作为props给路由组件
props(route){ // 引入 route 路由
return route.query
} 注意如果是 query 和 params 时的区别
路由query 模式下path 是这样的 path:detail,
params 模式是这样写 path:detail/:id/:title/:content?, {name:xinwen,path:/news,component:News,children:[{name:xiang,path:detail,component:Detail,// 第一种方法//props:true, // params模式下 path 要这样写path:detail/:id/:title/:content?,// 第二种方法// 第二种写法函数写法可以自己决定将什么作为props给路由组件props(route){ // query模式下 path 要这样写 path:detail,return route.query}}]},
