Vue 中路由的 props 配置

目录

1.作用

2.第一种写法

2.第二种写法

3.第三种写法

4.之前接收路由参数

---

1.作用

        让路由组件更加方便的收到参数，每次读取参数的时候不再那么繁琐

注意：props 是配置在当前路由规则中

2.第一种写法

        props 值为对象，让对象中的所有 key-value 的组合最终都会通过 props 传递给当前组件

路由中配置 props

{
    name:'xiangqing',
    path: 'detail/:id/:title',
    component: Detail,

    // 第一种写法，props 值为对象，该对象中的所有 Key-value 的组合最总都会通过 props 传给 Detail 组件
    props: {a: 900}
}

 路由组件中接收参数

<template>
  <ul>
    <li>{{ a }}</li>
  </ul>
</template>

<script>
    export default {
        name: 'Detail',
        props: ['a'],
    }

</script>

<style>

</style>

2.第二种写法

        props 值为布尔值，布尔值为 true, 则把路由所收到的所有 params参数 通过 props 传递给 当前组件

路由中配置 props

{
    name:'xiangqing',
    path: 'detail/:id/:title',
    component: Detail,

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

    路由组件中接收参数

<template>
  <ul>
    <!-- parms参数的接收 -->
    <li>消息编码：{{ id }}</li>
    <li>消息标题：{{ title }}</li>
  </ul>
</template>

<script>
    export default {
        name: 'Detail',
        props: ['id', 'title'],
    }

</script>

<style>

</style>

3.第三种写法

        props 值为函数，该函数的返回的对象中每一组 key-value 都会通过 props 传递给当前 组件

路由中配置 props

{
    name:'xiangqing',
    path: 'detail',
    component: Detail,

    // 第三中写法：props 值为函数，该函数的返回的对象中每一组 key-value 都会通过 props 传递给 Detail 组件
    props(route) {
        return {
        id: route.query.id,
        title: route.query.title
    }
},
                        

路由组件中接收参数

<template>
  <ul>
    <li>消息编码：{{ id }}</li>
    <li>消息标题：{{ title }}</li>
  </ul>
</template>

<script>
    export default {
        name: 'Detail',
        props: ['id', 'title'],
    }

</script>

<style>

</style>

4.之前接收路由参数

<template>
  <ul>

    <!-- query 参数的接收 -->
    <li>消息编码：{{ $route.query.id }}</li>
    <!-- parmas 参数的接收 -->
    <li>消息标题：{{ $route.parmas.title }}</li>
  </ul>
</template>

<script>
    export default {
        name: 'Detail',
    }

</script>

<style>

</style>

每次获取参数都会很麻烦