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里的参数录入，组件都会展示对应的参数数据

• 第二种传参方式为：对象模式，这种模式适用于普通传统的路由类型，没有参数，实现思路为，直接在组件里定义一个属性