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

Posted 2023-02-23

【中文标题】vue.js - 嵌套组件架构中的路由

【英文标题】：vue.js - routing in nested components architecture

【发布时间】：2018-11-06 17:43:42

【问题描述】：

我使用 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 中进入这个路由架构。

【问题讨论】：

我不认为每个人都应该有一个路由器视图。只有主要部分是发生路由的地方，其余部分应该只是稍微适应当前页面。

你说得对，这是一般情况。但是可以说我想在侧边栏中插入一个不同的菜单或根据当前路由向标题添加一个小部件。另一种情况是将侧边栏完全放在另一条路线中，这就是我希望它也成为单个组件的原因。我将如何设计这样的架构？

如果标题/侧边栏需要，我会使用几个v-ifs。我认为 Vue 尚不支持多个路由器视图：github.com/vuejs/vue-router/issues/213。不过，Angular 也有类似的东西：angular.io/guide/…

我希望在不使用 if-else 的情况下找到解决方案。谢谢，我会看看你的链接。

【参考方案1】：

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

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

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