点击动态加载vue组件

点击动态加载Vue组件可以通过Vue的异步组件实现。异步组件是指在需要时才会加载的组件，这样可以提高页面的加载速度和性能。在Vue中，可以使用`import()`函数来动态加载组件。

我们需要在Vue的路由配置中定义一个异步组件。在路由配置中，可以使用`component`属性来指定组件，但是这里我们使用`component`属性的值是一个函数，而不是直接指定组件的名称。这个函数返回一个Promise对象，当Promise对象被解析时，会加载相应的组件。

示例代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    {
      path: '/component',
      component: () => import('./Component.vue')
    }
  ]
})

在上面的代码中，`import('./Component.vue')`使用了`import()`函数来动态加载`Component.vue`组件。当访问`/component`路径时，会加载并渲染该组件。

接下来，我们可以在模板中使用`<router-link>`组件来生成链接，当点击链接时，会触发路由的切换，从而加载对应的组件。

示例代码如下：

<template>
  <div>
    <router-link to="/component">点击加载组件</router-link>
    <router-view></router-view>
  </div>
</template>

在上面的代码中，`<router-link to="/component">`生成了一个链接，点击该链接时，会触发路由切换到`/component`路径，并加载对应的组件。

通过以上的代码示例，我们可以实现点击动态加载Vue组件的效果。这种方式可以提高页面的加载速度和性能，因为只有在需要时才会加载组件，而不是在页面加载时就加载所有的组件。

除了使用Vue的异步组件，还可以使用第三方库如`vue-async-component`来实现动态加载组件。这些库提供了更多的功能和选项，可以根据需要进行选择和使用。

总结一下，点击动态加载Vue组件可以通过Vue的异步组件实现。在路由配置中定义异步组件，并使用`import()`函数来动态加载组件。在模板中使用`<router-link>`组件生成链接，点击链接时触发路由切换并加载对应的组件。这种方式可以提高页面的加载速度和性能。