chaihongjun.me

Vue-router路由组件传值

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"),
      },

路由组件的传值方式,只适合路由参数变量传值,不适合查询参数传值

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»