props除了可以用来父子组件传值之外,也可以用于路由组件的传值。
路由组件的传值,意思是路由的参数变量传递到对应的组件里。
{ path: "/", name: "Home", component: Home, children: [ { path: "news/:id", props: { news: true }, //请注意这里props后面的写法 name: "news", components: { news: () => import("../views/News.vue"), }, }, { path: "contact", name: "contact", components: { contact: () => import("../views/Contact.vue"), }, }, ], },
上面的案例,/home/news/:id 这里有一个变量参数,将传递到组件News.vue里面,组件通过props接收,并且可以在组件模板内渲染:
<template> <div class="news"> <p>{{id}}</p> </div> </template> <script> export default { name: "News", props: ["id"] }; </script>
以上要注意的地方是路由对象的配置,props后面的写法,由于给渲染组件设置了名字,所以,这里props里面也需要写对应的名字,如果渲染的组件没有设置名字,则可以省略:
{ path: "news/:id", props: true, //因为负责渲染的组件没有命名,所以这里直接赋值true name: "news", component: () => import("../views/News.vue"), },
路由组件的传值方式,只适合路由参数变量传值,不适合查询参数传值