Question

过去几个月我们一直在我公司使用Vue.js，我们真的很喜欢它！我们使用元素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>

通过以正确的方式获得逻辑，您可以避免必须为每条路线添加属性，只需（例如）您要隐藏的路径。

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

1 个答案: