vue.js结构应用程序布局

Question

我希望使用Holy Grail布局构建我的Web应用程序,只有一个侧边栏,没有页脚.侧边栏将用作导航栏,以及用于保存将在布局中心显示的内容的交互式选项,具体取决于当前选择的链接.这意味着,当在导航栏中选择要导航到的链接时,它将影响侧边栏中显示的内容以用于自定义交互选项以及中心中的主要内容.

为实现这一目标,我提出了几种方法:

1. 方法1:
   • 有一个Vue实例
   • 有一个Layout组件创建我们的布局,用于Header和Navbar子组件.
   • 我们的Vue实例将使用路由器,其中包含导航侧栏中存在的每个链接的路径
   • 我们的Vue实例将渲染一个 router-view组件以显示当前路径组件
   • 每个路径将显示其模板使用我们以前创建的Layout组件的组件,并使用插槽注入适当的自定义导航选项和主要内容.

Layout 零件:

<template>
<div class="app-layout">
    <header-component></header-component>
    <div class="main">
      <navbar-component>
        <slot name="navigation-menu"></slot>
      </navbar-component>
      <main>
        <slot name="main-content"></slot>
      </main>
    </div>
  </div>
</template>

<script>
  import Header from './Header.vue';
  import Navbar from './Navbar.vue';
  export default {
    name: 'Layout',
    components: {
      'header-component': Header,
      'navbar-component': Navbar
    }
  };
</script>

<style lang="sass" rel="stylesheet/scss" scoped>
  some styling to achieve our layout for the present tags in the template
</style>

Header 零件:

<template>
  <header v-once class="header">
    <router-link to="/">
      Brand
    </router-link>
  </header>
</template>

<script>
  export default {
    name: 'Header'
  };
</script>

<style lang="sass" rel="stylesheet/scss" scoped>
  some styling to achieve our layout for the present tags in the template
</style>

Navbar 零件:

<template>
  <nav class="navigation">
    <div class="links">
      // iterate on some property of this component, and create a list of links
    </div>
    <div class="menu">
      <slot name="navigation-menu"></slot>
    </div>
  </nav>
</template>

<script>
  export default {
    name: 'Navbar'
  };
</script>

<style lang="sass" rel="stylesheet/scss" scoped>
  some styling to achieve our layout for the present tags in the template
</style>

带路由的Vue实例:

import link1Component from './components/Link1ComponentUsingLayout.vue';
import link2Component from './components/Link2ComponentUsingLayout.vue';
import link3Component from './components/Link3ComponentUsingLayout.vue';

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/link1'
    },
    {
      path: '/link1',
      name: 'link1',
      component: Link1ComponentUsingLayout
    },
    {
      path: '/link2',
      name: 'link2',
      component: Link2ComponentUsingLayout
    },
    {
      path: '/link3',
      name: 'link3',
      component: Link3ComponentUsingLayout
    }
  ]
});

export default new Vue({
  el: '#app',
  router,
  render: h => h('router-view')
});

2. 方法2:
   • 有两个Vue实例
   • 将布局作为index.html中的静态html而不是组件
   • 每个Vue实例将使用路由器(每个一个),导航栏中存在每个链接的路径
   • 其中一个实例将安装在我们的静态html导航侧栏内的html上,另一个安装在中心内容区域内
   • 每个Vue实例将呈现一个 router-view组件以显示当前路径组件
3. 方法3:
   • 有一个Vue实例
   • 我们的Vue实例将使用路由器,其中包含导航侧栏中存在的每个链接的路径
   • 或者Vue实例将模板代表我们的布局和导航侧边栏内部,中心内容区域我们将有2个router-view组件
   • 我们的Vue实例将呈现导航侧边栏,中心内容是当前路径的组件
4. 方法4:
   • 与方法3相同,只要单击导航内的链接,就不要使用路由器并使用动态组件在导航侧边栏和中心内容区域组件之间切换.

现在,我想知道哪种方法最好,为什么？如果你有任何新的方法,我也想听听,并解释为什么它们会更好.

Answer 1

尽可能不要围绕布局构建代码。这就是我希望你得到的收获。

我倾向于基本上使用 2，但深一层（如 3）。我有一个应用程序组件可以从文件夹加载 vue 内容components。我有一个router-viewin main 来显示路线，一个用于标题和导航栏的标题组件，以及一个位于 main 底部的模态组件。