vue.js - 路由器视图中的 Vue 路由器 addRoute 空白

Question

首先，对不起我的英语不好。我正在学习 vue 中的模块化架构/按功能划分的文件夹，就像这样 在用户模块中输入图像描述 在用户模块中我创建了一个这样 的路由器，在此处输入图像描述 并将用户的路由器添加到主路由器，像这样 在此处输入图像描述 Builder 路由器是我的用户登录后应用程序路由。我的主路由器就像这样 在此处输入图像描述 发生的事情是当我访问/dashboard或/about或其他定义主路由器的页面时一切正常。然后我单击/user路由器（它来自用户的模块路由器），它也可以正常工作。但是当我/dashboard再次访问时。路由器视图什么也不显示（它<!-- -->在开发控制台中）。

1. 访问仪表板时就可以了。显示的页面（白框） 在此处输入图像描述
2. 在用户模块路由器中也可以在 此处输入图像描述
3. /dashboard当我再次 访问时它变成空白在此处输入图像描述 路由器视图的结构

   <router-view> Page Loader
      <router-view> Module Loader (Index, Add, Edit)

这是我的主路由器

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Builder',
    component: Builder,
    meta: {
      requiresAuth: true
    },
    redirect: '/dashboard',
    children: [
       {
        path: 'dashboard',
        name: 'Dashboard',
        meta: {
          pageTitle: 'Dashboard',
          requiresAuth: true
        },
        component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue')
      },
      {
        path: 'about',
        name: 'About',
        meta: {
          pageTitle: 'About',
          requiresAuth: true,
          breadcrumb: [
            {
              label: 'About',
              to: '/about'
            }
          ]
        },
        component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
      },
    ]
  };

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2. 注册路线

import router from '../router/index'
import store from '../store/index'

const registerModule = (name, module: any) => {
  if (module.store) {
    store.registerModule(name, module.store)
  }

  if (module.router) {
    module.router.forEach(item => {
      router.addRoute('Builder', item)
    })
  }
}

export const registerModules = (modules: any) => {
  Object.keys(modules).forEach(moduleKey => {
    const module = modules[moduleKey]
    registerModule(moduleKey, module)
  })
}

3. 用户模块路由

const moduleRoute = [{
  path: '/user',
  name: 'User',
  component: () => import(/* webpackChunkName: "user" */ '../user/Module.vue'),
  meta: {
    pageTitle: 'User Management Builder',
    requiresAuth: true,
    breadcrumb: [
      {
        label: 'User',
        to: '/user'
      }
    ]
  },
  children: [
    {
      path: 'list',
      name: 'UserList',
      meta: {
        pageTitle: 'User Management',
        requiresAuth: true,
        breadcrumb: [
          {
            label: 'User',
            to: '/user'
          }
        ]
      },
      component: () => import(/* webpackChunkName: "user" */ '../user/views/Index.vue')
    },
    {
      path: 'add',
      name: 'UserAdd',
      meta: {
        pageTitle: 'User Add',
        requiresAuth: true,
        breadcrumb: [
          {
            label: 'User',
            to: '/user'
          }
        ]
      },
      component: () => import(/* webpackChunkName: "user" */ '@/modules/user/views/Add.vue')
    }
]
}]

export default moduleRoute

额外说明：我也在使用 webpack，以防它影响我的问题

请提供任何帮助。先感谢您。

标签： vue.jsvue-routervue-router4