如果我希望在前端项目运行时去加载这些组件，而不是在项目初始化时就挂载到路由上，该怎么做呢

如果你希望在前端项目运行时去加载这些组件，而不是在项目初始化时就挂载到路由上，可以使用动态导入和异步组件的结合。

1. 首先在路由中定义一个占位符组件，例如：

   const PlaceholderComponent = { template: '<div>Loading...</div>' }

2. 在需要使用动态组件的地方，使用异步组件和动态导入来加载组件。例如：

   <template>
     <div>
       <component :is="dynamicComponent" />
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         dynamicComponent: PlaceholderComponent
       }
     },
     async mounted() {
       const componentCode = await fetchComponentCodeFromDatabase()
       const component = await eval(componentCode)
       this.dynamicComponent = defineAsyncComponent(() => component)
     }
   }
   </script>

在上面的代码中，我们首先将`dynamicComponent`设置为占位符组件`PlaceholderComponent`。然后在`mounted`钩子中异步获取数据库中保存的组件代码，并使用`eval`方法来执行这些代码，得到组件对象`component`。接着使用`defineAsyncComponent`方法来定义异步组件，并将其赋值给`dynamicComponent`。

在模板中使用`<component :is="dynamicComponent" />`来动态渲染组件，因为`dynamicComponent`是一个响应式的数据，所以当异步组件加载完成后，组件会自动更新。

3. 如果需要动态添加路由，可以使用`router.addRoute`方法来动态注册路由。例如：

   const componentCode = await fetchComponentCodeFromDatabase()
   const component = await eval(componentCode)
   const route = {
     path: '/dynamic',
     name: 'DynamicComponent',
     component: defineAsyncComponent(() => component)
   }
   router.addRoute(route)

注意：使用`eval`方法来执行从数据库中获取的代码有一定的风险，请确保你信任这些代码的来源。此外，如果你要动态添加路由，请确保在异步组件加载完成后再添加路由，否则会出现路由无法匹配的问题。