vue如何动态创建不同组件拼接成的新页面并在接口路径中加上这个页面

要动态创建不同组件并将它们拼接成一个新页面，并在接口路径中加上这个页面，可以使用Vue的动态组件和路由的动态注册来实现。下面是一个示例：

首先，安装并配置Vue Router：

npm install vue-router

然后，在Vue项目的入口文件（一般是main.js）中引入Vue Router，并创建一个空的路由实例：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter();

在接口返回的数据中，包含了需要加载的组件名称和对应的路径。你可以根据接口返回的数据动态注册路由和组件：

// 假设接口返回的数据格式如下：
const apiData = [
  { componentName: 'ComponentA', path: '/component-a' },
  { componentName: 'ComponentB', path: '/component-b' },
  // 其他组件和路径的配置
];

// 循环遍历接口返回的数据，动态注册路由和组件
apiData.forEach(data => {
  const component = () => import(`@/components/${data.componentName}.vue`);
  router.addRoutes([
    {
      path: data.path,
      component
    }
  ]);
});

在上面的示例中，首先定义了一个`apiData`数组，其中包含了需要加载的组件名称和对应的路径。然后使用`forEach`方法遍历`apiData`数组，在每次循环中动态注册路由和组件。通过`import()`函数来动态导入组件，并使用箭头函数将组件作为路由的组件属性。

最后，在Vue实例中使用该路由实例：

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

现在，你可以在接口路径中访问动态创建的页面，例如`/component-a`和`/component-b`。每个路径都会对应加载相应的组件。

需要注意的是，动态创建页面可能会导致过多的路由和组件而影响性能，所以在实际使用中请谨慎考虑。另外，你还需要根据实际需求对示例代码进行适当的修改和调整。