vue2 加载网页组件

在 Vue2 中加载网页组件有几种方法：

1. 使用 Vue 的内置组件：可以通过 `<component>` 标签来动态加载组件，需要在 data 中定义一个变量来表示要加载的组件名称，然后通过动态绑定的方式将组件名称传递给 `<component>` 标签。

例如，假设有一个组件列表，根据用户点击的不同按钮来加载不同的组件：

<template>
  <div>
    <button @click="loadComponent('ComponentA')">Load Component A</button>
    <button @click="loadComponent('ComponentB')">Load Component B</button>

    <component :is="currentComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: null
    }
  },
  methods: {
    loadComponent(componentName) {
      this.currentComponent = componentName;
    }
  }
}
</script>

2. 使用 Vue Router：Vue Router 是 Vue.js 的官方路由管理器，可以用于创建单页面应用（SPA）。通过配置路由表，可以在不同的路由路径下加载不同的组件。

首先，在 main.js 中配置 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'

Vue.use(VueRouter);

const routes = [
  { path: '/componentA', component: ComponentA },
  { path: '/componentB', component: ComponentB }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

然后，在组件中使用 `<router-link>` 标签来实现路由导航，使用 `<router-view>` 标签来展示当前路由对应的组件。

<template>
  <div>
    <router-link to="/componentA">Component A</router-link>
    <router-link to="/componentB">Component B</router-link>

    <router-view></router-view>
  </div>
</template>

这样，当用户点击不同的路由链接时，对应的组件会被加载并渲染到 `<router-view>` 中。

以上是 Vue2 中加载网页组件的两种常用方法，根据你的具体需求选择适合的方式即可。