Vue.js多模板使用异常：后台/前台模板无法渲染，页面空白

你的问题核心是路由组件没有正确的渲染出口，同时路由结构和模板组件的挂载逻辑不匹配，导致页面空白。以下是两种可行的修复方案：

方案一：使用嵌套路由（推荐） #

将后台/前台的模板作为父路由，对应的页面组件作为子路由嵌套进去，路由系统会自动把页面组件渲染到模板的<router-view>中。

修改路由配置（Router.js） #

const routes = [
  // 后台面板路由组
  {
    path: '/panel',
    component: () => import('./templates/PanelTemplate.vue'), // 懒加载优化
    meta: { template: 'panel' },
    children: [
      {
        path: 'dashboard',
        name: 'panel-index',
        component: () => import('./views/PanelView.vue')
      },
      // 其他后台页面路由都放在这个children数组里
    ]
  },
  // 前台网站路由组
  {
    path: '/',
    component: () => import('./templates/WebsiteTemplate.vue'),
    meta: { template: 'website' },
    children: [
      {
        path: '',
        name: 'website-index',
        component: () => import('./views/WebsiteView.vue')
      },
      // 其他前台页面路由都放在这个children数组里
    ]
  }
]

简化App.vue #

此时App.vue只需要一个根<router-view>来渲染父路由的模板组件：

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

模板组件（PanelTemplate.vue/WebsiteTemplate.vue）保持原结构不变：

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

方案二：动态切换模板组件（不修改路由结构） #

如果不想调整路由结构，可以通过动态组件结合响应式计算属性，确保模板组件正确挂载，同时路由组件能渲染到模板的插槽中。

修改App.vue #

<template>
  <!-- 用动态组件根据路由meta切换模板 -->
  <component :is="activeTemplate">
    <!-- 路由组件会渲染到模板的插槽中 -->
    <router-view></router-view>
  </component>
</template>

<script>
import PanelTemplate from './templates/PanelTemplate.vue'
import WebsiteTemplate from './templates/WebsiteTemplate.vue'

export default {
  components: {
    PanelTemplate,
    WebsiteTemplate
  },
  computed: {
    activeTemplate() {
      // 根据路由meta返回对应的模板组件名
      return this.$route.meta.template === 'panel' ? 'PanelTemplate' : 'WebsiteTemplate'
    }
  },
  // 监听路由变化，确保模板组件响应更新
  watch: {
    '$route'() {
      this.$forceUpdate()
    }
  }
}
</script>

调整模板组件 #

将模板组件的<router-view>替换为<slot>，让路由组件通过插槽渲染：

<!-- PanelTemplate.vue/WebsiteTemplate.vue -->
<template>
  <!-- 这里可以添加后台/前台的通用布局，比如侧边栏、导航栏 -->
  <div class="panel-layout">
    <slot></slot> <!-- 路由组件会渲染到这里 -->
  </div>
</template>

关键注意事项 #

• 确保所有路由都正确设置了meta.template属性，避免出现未匹配的情况
• 如果使用嵌套路由，子路由的path不要加斜杠（比如'dashboard'而不是'/dashboard'）
• 推荐用懒加载方式导入组件，优化首屏加载速度

内容的提问来源于stack exchange，提问作者Ömer Faruk Demirel