Vue-router路由的props配置

最新推荐文章于 2025-11-21 04:35:03 发布

原创最新推荐文章于 2025-11-21 04:35:03 发布 · 481 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章详细介绍了在Vue.js中通过props向组件传递参数的三种方式：1)props值为对象，直接定义键值对；2)props值为布尔值，自动传递路由params参数；3)props值为函数，动态获取和处理$route参数。每种方法的适用场景和灵活性不同，第三种方式最为灵活，可处理params和query参数。

作用：让路由组件更方便的收到参数。

第一种写法：props值为对象

第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件


children: [
    {
        name: 'xiangqing',
        path:'detail',
        component: Detail,
        // props对象中所有的key-value的组合最终都会通过props传给Detail组件
        props:{
            id: '888',
            title: '你好啊'
        }
    }

在Detail组件中使用props接收传递来的数据

<template>
  <div>
    <ul>
        <li>接收的id为{{id}}</li>
        <li>接收的title为{{title}}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
    name: 'Detail',
    // 接收组件传递来的数据
    props: ['id', 'title']
}
</script>

这种写法传递的参数不灵活一般很少使用

第二种写法：props值为布尔值

第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件

{
    name: 'xiangqing',
    path:'detail/:id/:title', //使用占位符声明接收params参数
    component: Detail,
    // 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
    props: true
}

传递params参数

<li v-for="item in list" :key="item.id">
  <router-link :to="{
    name: 'xiangqing',
    params: {
      id: item.id,
      title: item.title
    }
  }">{{ item.title }}</router-link>
</li>

组件内部使用props接收参数

<template>
  <div>
    <ul>
        <li>接收的id为{{id}}</li>
        <li>接收的title为{{title}}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
    name: 'Detail',
    // 接收组件传递来的数据
    props: ['id', 'title']
}
</script>

这种写法相对比上一种传参更为简介灵活但是只能作用于params类型的参数无法对query类型的参数起作用

第三种写法：props值为函数

第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件

 {
      name: 'xiangqing',
      path:'detail/:id/:title', //使用占位符声明接收params参数
      component: Detail,
      // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
      // props函数会自动调用并提供一个$route参数 可以通过$route来获取想要的数据传递给组件
      props($route) {
          return {
              id: $route.params.id||$route.query.age,
              title: $route.params.title||$route.query.name,
              // 还可以返回一些别的数据
              a: 1,
              b: "hello"
          }
      }
  }

组件内部使用props接收参数

<template>
  <div>
    <ul>
        <li>接收的id为{{id}}</li>
        <li>接收的title为{{title}}</li>
        {{a}}-----{{b}}
    </ul>
  </div>
</template>
 
<script>
export default {
    name: 'Detail',
    // 接收组件传递的参数
    props: ['id', 'title', 'a', 'b']
}
</script>

这种方式传递数据更为灵活通过函数的$route参数来获取需要的数据传递给组件另外还可以携带一些其他数据通过$route可以获取params和query两种形式的参数相对前两种方式来说功能更加的强大