页面的基本布局答案

【问题标题】：Basic layout of the page页面的基本布局
【发布时间】：2020-10-21 21:45:30
【问题描述】：

我是 Vue.js 的新手。我想使用组件向页面添加页眉、内容和页脚。我在代码中得到了一个额外的 div - 我该如何删除它？

<!doctype html>
<html class="h-full" lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/tailwind.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div>
         <header></header>
         <main role="content"></main>
         <footer></footer>
    </div>
    <script src="js/app.js"></script>
</body>
</html>

附加问题：如何为登录页面制作另一种布局？此页面将没有页眉和页脚。

源文件

index.html

<!doctype html>
<html class="h-full" lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/tailwind.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="app"></div>
    <script src="js/app.js"></script>
</body>
</html>

App.vue

<template>
    <Layout>
        <template v-slot:header>
            <Header/>
        </template>

        <router-view></router-view>

        <template v-slot:footer>
            <Footer/>
        </template>
    </Layout>
</template>

<script>
    import Layout from './layouts/TheLayout'
    import Header from './components/TheHeader'
    import Footer from './components/TheFooter'


    export default {
        components: {
            Layout,
            Header,
            Footer
        },
    }
</script>

TheLayout.vue

<template>
    <div>
        <slot name="header"></slot>
        <slot></slot>
        <slot name="footer"></slot>
    </div>
</template>

<script>
    export default {}
</script>

【问题讨论】：

标签： vue.js

【解决方案1】：

<div> 无法删除。
您可以将计算属性用于其他布局。

<template>
    <Layout>
        <template #header>
            <Header v-if="isBoard"/>
        </template>

        <router-view></router-view>

        <template #footer>
            <Footer v-if="isBoard"/>
        </template>
    </Layout>
</template>

<script>
    import Layout from './layouts/BaseLayout'
    import Header from './components/TheHeader'
    import Footer from './components/TheFooter'
    
    export default {
        computed: {
            isBoard() {
                return this.$route.name === 'Board'
            }
        },
        components: {
            Layout,
            Header,
            Footer
        },
    }
</script>

【讨论】：