Vue-admin工作整理（四）：路由组件传参

路由组件传参：如果在一个页面中，需要根据路由去获得参数，去对页面进行一些逻辑处理，首先可以通过this.$router来获取路由实例的参数，这样页面组件和路由就进行了耦合，为了进行分离，更大程度复用，我们推出了路由组件传参的实现方案：

• 第一种传参方式为：布尔模式，它适用于有动态路由传参的路由配置中，实现思路为：将路由的参数作为属性来传入到组件中

  <template>
    <div>
      {{ name }}
    </div>
  </template>
  
  <script>
  export default {
    props: {
      name: {
        type: String,
        default: 'apple'
      }
    }
  }
  </script>
  <style lang="less" scoped>
  
  </style>

  {
      path: '/argu/:name',
      component: () => import('@/views/argu.vue'),
      props: true
    }

  这样随着不同的url里的参数录入，组件都会展示对应的参数数据

• 第二种传参方式为：对象模式，这种模式适用于普通传统的路由类型，没有参数，实现思路为，直接在组件里定义一个属性，然后路由列表中定义一个路由对象的属性值，默认情况下取的是组件里的默认值，存在各个路由对象下则取对应路由对象的属性值：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <d>
      {{ food }}
    </d>
  </div>
</template>
<script>
export default {
  props: {
    food: {
      type: String,
      default: 'apple'
    }
  }
}
</script>

{
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
    props: {
      food: 'banana'
    }
  }

• 第三种传参方式为：函数模式，适合于在传入的属性中，能够根据当前的路由，来做一些处理逻辑，从而设置传入组件的属性值，就是如果URL+参数，实现传递不同的内容给组件，实现逻辑：路由列表中以函数方式同等属性名（food）来获取当前路由实例的指定属性的值：route.query.food，然后组件中定义同名属性以承接路由列表传递的属性值，然后供业务逻辑处理呈现

　　　　

{
    path: '/',
    name: 'home',
    alias: '/home_page',
    component: Home,
    props: route => ({
      food: route.query.food
    })
  }

  props: {
    food: {
      type: String,
      default: 'apple'
    }
  }