vue.js

Question

我使用 vue.js 来设计一个管理应用程序，我正在尝试构建尽可能模块化的 UI 架构。所以我在单个文件组件中设置并包装了 Header、Body、Sidebar 和 Main，如下所示。

树

App
- Header
  - dynamic content
- Body
  - Sidebar
    - dynamic content
  - Main
    - dynamic content

图形

┌──────────────────────────────────────────────────────────┐
│ HEADER                              SOME DYNAMIC CONTENT │
├──────────────────────────────────────────────────────────┤
│ BODY                                                     │
│┌──────────┬─────────────────────────────────────────────┐│
││ SIDEBAR  │ MAIN                                        ││
││          │                                             ││
││ SOME     │ SOME DYNAMIC CONTENT                        ││
││ DYNAMIC  │                                             ││
││ CONTENT  │                                             ││
││          │                                             ││
│└──────────┴─────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────┘

现在每个组件都有自己的路由视图，可以根据当前路由显示动态内容。当我在 vue.js 中只有一个可用的路由器视图时，如何实现这一点？在不覆盖类似于 php Smarty 的原始内容的情况下，是否可以通过路由视图组件完全解决这些动态组件？

aboutus.vue

<template>
    <div>
        <header>
            <header-content>
                About us - Header
            </header-content>
        </header>
        <sidebar>
            <sidebar-content>
                About us - Sidebar
            </sidebar-content>
        </sidebar>
        <main>
            <main-content>
                About us - Main
            </main-content>
        </main>
    </div>
</template>

<script>
    /* ... */
</script>

但我猜这是不可能的，因为嵌套架构？我在 vue.js 中找不到使用嵌套组件进入此路由架构的正确方法。

Answer 1

我已经尝试实现与此类似的东西，其中我有单独的组件文件夹，在该文件夹下有视图文件夹。所以我在 index.js 中导入了组件。看看下面的例子，我导入了管理组件，并在其中添加了它的子组件。同样，您可以将多个子组件添加到不同的组件中，这些子组件将仅在其父组件中加载。

{
 path: '/admin',
      component: AdminComponent,
      children: [
        {
          path: 'admin_dashboard',
          alias: '',
          component: AdminDashboard,
          name: 'admin_dashboard'
        },

看看这个主题结构https://github.com/misterGF/CoPilot

vue.js - 嵌套组件架构中的路由

vue.js - routing in nested components architecture

javascript

routing

vue-router

vue-component