vuejs根据路由组件动态加载组件

Question

我是 Vuejs 的新手，我想知道如何根据访问的路径将组件加载到 App.vue。

在我的路由器中 -> index.js 我有：

import { createRouter, createWebHistory} from 'vue-router'
import Events from '../views/Events.vue'

const routes = [
  {
    path: '/',
    name: 'events',
    component: Events
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在我的 App.vue 中，我有一个模板要用于整个网站，所以我想在这里加载模板而不是将它加载到每个组件中。我的模板在屏幕中央有 1 个框，因此内容会根据用户转到的路线而变化。

除了从路由文件中调用组件内容，有没有更好的方法根据访问的路由将其动态加载到App.vue？

我可以在 App.vue 中硬编码，例如：

<template>
<Events />
</template>
<script>
import Events from './views/Events.vue'
export default defineComponent({
  components: {
    Events
  },
</script>

但这并不能解决我的事件组件根据访问的路径动态加载的问题。有没有一种方法可以通过 this.$route 之类的方式访问底层组件来加载组件而不是对其进行硬编码。

Answer 1

router-view 组件将根据其路径呈现组件：

<template>
   <router-view/>
</template>
<script>

export default defineComponent({

})
</script>

vuejs根据路由组件动态加载组件

vuejs loading component dynamically depending on route component

vue.js

vuejs2

vuejs3