vue3路由引入公共组件

在Vue3中，可以通过使用`defineAsyncComponent`方法来引入异步组件，从而实现按需加载。在路由中引入公共组件可以使用以下步骤：

1. 在`src/components`目录下创建公共组件文件，例如`Header.vue`。
2. 在路由文件中引入`defineAsyncComponent`方法，并使用该方法引入公共组件。

例如，假设我们有一个`Header.vue`组件，它在多个页面中都需要使用。我们可以在路由文件中定义一个异步组件来引入该组件：

import { defineAsyncComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: defineAsyncComponent(() => import('@/views/Home.vue')),
      // 引入公共组件
      meta: {
        header: defineAsyncComponent(() => import('@/components/Header.vue'))
      }
    },
    // ...
  ]
})

export default router

上述代码中，我们使用`defineAsyncComponent`方法来引入`Header.vue`组件，并将其作为`meta`的一个属性。在需要使用该组件的页面中，我们可以通过访问`meta.header`来引用该组件。

<template>
  <div>
    <header-component />
    <!-- ... -->
  </div>
</template>

<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

export default {
  components: {
    HeaderComponent: computed(() => useRoute().meta.header)
  }
}
</script>

上述代码中，我们使用`computed`和`useRoute`方法来访问`meta.header`属性，并将其作为`HeaderComponent`的组件引用。

注意：在Vue3中，`createRouter`和`createWebHistory`方法的使用方式发生了改变，请根据实际情况进行修改。