在特定页面上插入不同块的页面的 Vue App 布局答案

【问题标题】：Vue App layout for pages with insertion of different blocks on a specific page在特定页面上插入不同块的页面的 Vue App 布局
【发布时间】：2020-01-10 20:02:26
【问题描述】：

我有一个 vue 项目：

App.vue
layouts 
---- DefaultLayout.vue
views
---- Home.vue
---- About.vue
....

DefaultLayout.vue：

<template>
  <span>
    <div class="change">
      <slot/>
    </div>
    <b-container>
      <router-view></router-view>
    </b-container>
  </span>
</template>
<script>
export default {
  name: "DefaultLayout"
};
</script>

Home.vue：

<template>
  <div>
    <div class="change">
      <h1>Default layout</h1>
    </div>
    <h2>Default Layaout > Home</h2>
    <router-link :to="{ name: 'Intro', params: { id: intro }}">intro</router-link>
  </div>
</template>

<script>
import DefaultLayout from "../layouts/DefaultLayout";

export default {
  name: "Home",
  components: {
    DefaultLayout
  }
};
</script>

关于.vue：

<template>
  <div class="change">
    <h2>Default Layaout > About</h2>
  </div>
</template>
<script>
import DefaultLayout from "../layouts/DefaultLayout";

export default {
  name: "about",
  components: {
    DefaultLayout
  }
};
</script>

重点是为页面（视图）进行总体布局，但能够更改特定块 (class = "change")。对于 home，一个内容，对于 about，另一个，但是页面的一般框架。

现在：

<div id="app">
  <span>
    <div class="change"></div>
    <div class="container">
      <div>
        <div class="change">
          <h1>Default layout</h1>
        </div>
        <h2>Default Layaout &gt; Home</h2>
        <a href="#/" class="router-link-active">intro</a>
      </div>
    </div>
  </span>
</div>

它应该是（没有双重change）：

<div id="app">
  <span>
    <div class="container">
      <div>
        <div class="change">
          <h1>Default layout</h1>
        </div>
        <h2>Default Layaout &gt; Home</h2>
        <a href="#/" class="router-link-active">intro</a>
      </div>
    </div>
  </span>
</div>

codesandbox

问题：如何用slot（在某个地方不同的插入）为app vue视图（页面）格式化布局（页面的通用模板框架）？

【问题讨论】：

标签： html vue.js vuejs2

【解决方案1】：

您可以使用来自 vue-router 的命名视图：https://router.vuejs.org/guide/essentials/named-views.html

您会看到更改部分的视图，其余部分的默认视图。

在您的布局中：

<div class="change">
     <router-view name="title">
</div>

每个部分都有自己的组件，例如About 和AboutTitle。

然后在路由器配置中：

routes = [
  {
    path: "/",
    name: "DefaultLayout",
    component: DefaultLayout,
    children: [
      {
        path: "about",
        name: "About",
        title: "About",
        components: {
            default: About,
            change: AboutTitle,
        },
      },
    ]
  },
]

或者，您可以使用DefaultLayout 中的插槽：

<div class="change">
    <slot name="title"></slot>
</div>
<slot></slot>

并在您的页面中直接使用DefaultLayout：

<DefaultLayout>
    <template #title><h1>About title</h1></template>
    <h2>About content</h2>
</DefaultLayout>

在路由配置中，你不会声明DefaultLayout：

routes = [
    {
        path: "/about",
        name: "About",
        title: "About",
        components: {
            default: About,
            change: AboutTitle,
        },
    },
]

第二个选项有一个缺点：DefaultLayout 将在页面更改时重新创建。

【讨论】：