如何传参数给import的vue？

Question

component: () => import('')，vue文件中有变量，如何在router把值传给import的vue的文件？

```javascript
        path: '/smt',
        component:Layout,
        children:[
          {
            path:'/L01-L04',
            component: () => import('@/modules/charts/workshop.vue'),
            meta: {
              title: "车间产线看板",
              icon: 'el-icon-s-data',
            }
          },
          {
            path:'/L05-L08',
            component: () => import('@/modules/charts/workshop.vue'),
            meta: {
              title: "车间产线看板",
              icon: 'el-icon-s-data',
            }
          },
        ]

workshop.vue的代码

<template>
    <div  >
        <iframe :src="url" style="width: 100%;height:700px;" ></iframe>
    </div>
</template>
 
 
<script>
    export default {
        data () {
            return {
                url:''
            }
        },
        mounted(){

        }
    }
</script>

```

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要将参数传递给通过 import() 动态加载的 Vue 组件，你可以使用几种方法。在你的场景中，由于你是在路由配置中动态导入组件，并且需要将参数从路由传递给这个组件，你可以使用路由的 props 属性来传递数据。这里有一个步骤说明如何做到这一点：

步骤 1：在路由配置中传递参数

在路由配置中，你可以使用 props 属性来传递数据给动态加载的组件。在你的例子中，你可以在 children 数组中的每个对象中添加一个 props 属性，以传递不同的参数给同一个组件。

path: '/smt',
component: Layout,
children: [
  {
    path: '/L01-L04',
    component: () => import('@/modules/charts/workshop.vue'),
    props: { url: 'http://example.com/L01-L04' }, // 这里传递参数给 workshop.vue 组件
    meta: {
      title: "车间产线看板",
      icon: 'el-icon-s-data',
    }
  },
  {
    path: '/L05-L08',
    component: () => import('@/modules/charts/workshop.vue'),
    props: { url: 'http://example.com/L05-L08' }, // 这里传递不同的参数给同一个 workshop.vue 组件
    meta: {
      title: "车间产线看板",
      icon: 'el-icon-s-data',
    }
  },
]

步骤 2：在 workshop.vue 组件中接收参数

在你的 workshop.vue 组件中，你可以使用 props 来接收通过路由传递的参数。你可以在 props 选项里定义一个属性来接收 url。

<template>
  <div>
    <iframe :src="url" style="width: 100%;height:700px;"></iframe>
  </div>
</template>

<script>
export default {
  props: ['url'], // 这里定义接收 url 参数的 prop
  data() {
    return {
      // ... 其他数据
    };
  },
  mounted() {
    // 组件挂载时的逻辑，可以使用 this.url 来访问传递进来的参数
  }
}
</script>

这样，当你访问 /smt/L01-L04 或 /smt/L05-L08 时，workshop.vue 组件将通过 props 接收到不同的 url 参数，并可以在组件内部使用这个参数。