作用：讓路由組件更方便的收到參數(shù)（可以將路由參數(shù)作為props傳給組件）

{name:'xiang',path:'detail/:id/:title/:content',component:Detail,
?
第一種方法：// props的對(duì)象寫(xiě)法，作用：把對(duì)象中的每一組key-value作為props傳給Detail組件// props:{a:1,b:2,c:3}, 
?// props的布爾值寫(xiě)法，作用：把收到了每一組params參數(shù)，作為props傳給Detail組件// props:true第二種方法：// props的函數(shù)寫(xiě)法，作用：把返回的對(duì)象中每一組key-value作為props傳給Detail組件props(route){return route.query}
}

路由規(guī)則的props?的寫(xiě)法：

第一種寫(xiě)法：在路由上：props:true?只支持 params?的形式

{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail/:id/:title/:content?',component:Detail,// 第一種寫(xiě)法： // 第一種寫(xiě)法：將路由收到的所有params參數(shù)作為props傳給路由組件props:true,　　}]},第二步：在Detail.vue 頁(yè)面中：<template><ul class="news-list"><li>編號(hào)：{{ id }}</li><li>標(biāo)題：{{ title }}</li><li>內(nèi)容：{{ content }}</li></ul></template><script setup lang="ts" name="About">defineProps(['id','title','content'])　　// 執(zhí)行這個(gè)defineProps　中包括的參數(shù)</script>

第二種方法：支持query?模式：

// 第二種寫(xiě)法：函數(shù)寫(xiě)法，可以自己決定將什么作為props給路由組件

props(route){　//?引入 route?路由

return route.query

}

注意如果是　query 　和　params 時(shí)的區(qū)別：

路由：query?模式下path?是這樣的　path:'detail',　　

params?模式是這樣寫(xiě)：　path:'detail/:id/:title/:content?',

{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail',component:Detail,// 第一種方法：//props:true,  //　params模式下 path 要這樣寫(xiě)：path:'detail/:id/:title/:content?',// 第二種方法：// 第二種寫(xiě)法：函數(shù)寫(xiě)法，可以自己決定將什么作為props給路由組件props(route){　　// query模式下　path 要這樣寫(xiě)　path:'detail',return route.query}}]},