在嵌套路由中,父路由向子路由传值有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