使用嵌套的 Vue.js 组件处理布局

Question

过去几个月我们一直在我的公司使用 Vue.js，我们真的很喜欢它！我们使用 Element UI 作为 UI，使用 vue-router 进行路由。根据我们的数据结构，我们将路线嵌套了好几层。它看起来像这样：

App -> 
    Line ->
        Type ->
            Component1
            Component2
            Component3

我们的设计师希望能够在每个页面的基础上控制布局，甚至可以一直控制到 Component* 内部。例如，在Component1 中可能有一个带有侧边栏和页脚的布局，而在Component2 中可能没有侧边栏但页脚会被隐藏。

基于嵌套结构，我们发现这很复杂。它们不是在页面上显示为不同的块，而是相互嵌套。我们可以取消嵌套每个 Vue 路由，但是我们冒着通过许多处于同一级别的页面重复逻辑的风险。

在这样的嵌套结构中处理布局有哪些好方法？

Answer 1

听起来布局是独立于组件构建指定的，因此您希望使其尽可能正交。

可以在meta 属性中向路由添加其他数据。

const routes = [
  { 
    path: '/', 
    name: 'Home', 
    component: Home,
    meta: { hiddenFeatures: {sidebar: true, footer: false} }
  },
  ...

在 App 组件上，观察路由变化并根据附加配置设置可见性标志。

export default {
  name: 'app',
  data() {
    return {
      ...
      hiddenFeatures: {}
    };
  },
  watch: {
    '$route': function (route) {
      this.hiddenFeatures = route.meta.hiddenFeatures || {}
    }
  },
}

在App模板中，使用条件渲染

<template>
  <div id="app">
    <div class="container-fluid">
      <sidebar v-if="!hiddenFeatures.sidebar"></sidebar>

通过正确的逻辑，您可以避免必须向每条路由添加属性，只是（例如）您想要隐藏的那些。