首页 文章

vue.js结构应用程序布局

提问于
浏览
9

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

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

  • Approach 1:

  • 有一个Vue实例

  • Layout 组件创建我们的布局,子组件有 HeaderNavbar .

  • 我们的Vue实例将使用路由器,其中包含导航侧栏中存在的每个链接的路径

  • 我们的Vue实例将渲染 one 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')
});
  • Approach 2:

  • 有两个Vue实例

  • 将布局作为index.html中的静态html而不是组件

  • 每个Vue实例将使用路由器(每个一个),导航栏中存在每个链接的路径

  • 其中一个实例将安装在我们的静态html导航侧栏内的html上,一个安装在中心内容区域内的一个实例上

  • 每个Vue实例将呈现 one router-view 组件以显示当前路径组件

  • Approach 3:

  • 有一个Vue实例

  • 我们的Vue实例将使用路由器,其中包含导航侧栏中存在的每个链接的路径

  • 或Vue实例将模板将代表我们的布局和导航侧边栏内部,以及中心内容区域我们将有2个 router-view 组件

  • 我们的Vue实例将呈现导航侧边栏,中心内容是当前路径的组件

  • Approach 4:

  • 与方法3相同,只要单击导航内的链接,就不要使用路由器并使用动态组件在导航侧边栏和中心内容区域组件之间切换 .

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

2 回答

  • 0

    尽可能不要在您的布局周围构建代码 . 这是我希望你的外卖 .

    我倾向于使用基本上2但是一个深度(如3) . 我有一个应用程序组件来加载来自 components 文件夹的vue东西 . 我在main中有一个 router-view 来显示路径, Headers 和导航栏的 Headers 组件,以及main底部的模态组件 .

  • 0

    第一种方法可能是最好的方法,除非你没有 router-view . 除非导航将发生变化,否则您也不需要使用插槽 . 如果您的导航正在改变,您可能会在 Navbar 组件内执行此逻辑 .

    您可以将 Layout 组件简化为:

    <template>
      <div class="app-layout">
        <header-component />
        <div class="main">
          <navbar-component />
          <main>
            <router-view />
          </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>
    

    您调用 h => h('router-view') 的方式是将整个应用程序渲染为 router-view ,这不是您想要的 . 您只希望 main div根据您所在的路线更改内容 . 将其更改为:

    export default new Vue({
      el: '#app',
      router,
      render: h => h(require('./Layout')) //change this path to where Layout.vue is
    });
    

    这将使您的 Layout 组件成为您应用的根组件 .

相关问题