在嵌套路由中烦磁,父路由向子路由傳值有query养匈,還有params,params分為兩種一種在地址欄顯示都伪,一種是不顯示呕乎;
query 傳值
在router 文件夾下的index.js中
{?path:?"/",?redirect:?"/home"?},//重定向??
????{??
????????path:?"/home",?component:?home,??
????????children:?[??
????????????{?path:?"/home/list",?component:?list}??
????????]??
????}??
在父組件使用
? <router-link :to="{path:'/home/list',query:{num:10}}"></router-link>
在子組件使用
{{ $route.query.num }}獲取傳遞過來的值,注意是$route? 不是router
地址欄路徑為
localhost:8080/home/list?num=10
params 傳值
1.在url中顯示
在router 文件夾下的index.js中
{??
????????path:?"/home",?component:?home,??
????????children:?[??
????????????{?path:?"/home/list/:num",?component:?list}??
????????]??
????}??
父組件中使用
?<router-link to="/home/list/12"></router-link>
在子組件使用
{{ $route.params.num }}獲取傳遞過來的值
地址欄路徑為
localhost:8080/home/list/12
2.在url中不顯示
在router 文件夾下的index.js中
{??
????????path:?"/home",?component:?home,??
????????children:?[??
????????????{ name: 'list',path:?"/home/list",?component:?list}??
????????]??
????}
父組件中使用
<router-link :to=" {name:'list', params:{num: 12} } "></router-link>
在子組件使用
{{ $route.params.num }}獲取傳遞過來的值
地址欄路徑為
localhost:8080/home/list