时间戳

首页 > 解决方案 > vue.js - 嵌套组件架构中的路由

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

问题描述

我使用 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的原始内容，像这样？

关于我们.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 中的这种路由架构。

标签： javascriptvue.jsroutingvue-componentvue-router

解决方案

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

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

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

推荐阅读