路由组件的传参

Posted 2021-02-03 bao2333

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了路由组件的传参相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    如果某个route上写了props: true属性，那么对应的路由组件上就会多出来一个属性
    {
      path: ‘/demo/:a‘,
      component: demo,
      props: true
    }

    相当于
    <demo v-bind="$route.params"></demo>
    又相当于
    <demo :id="$route.params.id"></demo>

    如果给路由对象上添加props等于true则对应的路由组件里就可以接收props
    props: {
      params参数: 数据类型
    }



    如果路由对象上的props是对象，则会按照原样添加给路由组件
    {
      path: ‘/‘,
      component: demo,
      props: {a: 1, b: 2, c: 3}
    }

    相当于
    <demo v-bind="{a: 1, b: 2, c: 3}"></demo>
    又相当于
    <demo :a="1" :b="2" :c="3"></demo>

    所以可以在demo组件中设置prop接收a b c三个值



    1 如果props是true
      则将route.params添加到组件上
      <com v-bind="route.params"></com>

    2 如果props是对象
      则将这个对象原样添加到组件上
      <com v-bind="props"></com>

    3 如过props是函数 （一般返回值为对象）
      则将这个函数的返回值添加到组件上
      <com v-bind="props返回值"></com>
  
    <com v-bind="{key:value}"></com>
    <com :key="value"></com>

    最终就可以在组件中设置props用于接收这些属性值

    这个不是新的功能，而是为了解耦提出的新的写法
   -->
  <div id="app">
    <router-view></router-view>
  </div>
  <script src="../vue.js"></script>
  <script src="../vue-router.js"></script>
  <script>
    const com = {
      template: `
        <div>组件</div>
      `,
      props: {
        id: String,
        // a: Number, 
        // b: Number,
        // c: Number,
        // query: Object
        a: String, 
        b: String,
        c: String,
      },
      created () {
        this.getData()
      },
      methods: {
        getData () {
          // console.log(this.$route.params.id)
          console.log(this.id)
          console.log(this.a, this.b, this.c)
          console.log(this.query)
        }
      }
    }

    const router = new VueRouter({
      routes: [
        {
          path: ‘/:id‘,
          component: com,
          // props: true
          /* props: {
            a: 1,
            b: 2, 
            c: 3
          } */
          props: (route) => {
            return route.query
          }
        }
      ]
    })

    const app = new Vue({
      el: ‘#app‘,
      router
    })
  
  </script>
</body>
</html>

以上是关于路由组件的传参的主要内容，如果未能解决你的问题，请参考以下文章

关于ng路由的传参问题(传递一个，多个参数)