nuxt 的父模版子模版

最新推荐文章于 2024-08-19 02:52:18 发布

原创最新推荐文章于 2024-08-19 02:52:18 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

nuxt 专栏收录该内容

3 篇文章

订阅专栏

本文介绍在Vue项目中如何使用子模版继承非默认的父模版，通过具体示例解释如何指定和使用自定义布局，如在pages/server.vue中调用loyouts/servera.vue作为其父模版。

子模版继承非默认父模板

layouts/default.vue 是默认的父模版

子模版 pages/server.vue

<script>
    export default {
        //layout: 调用的父模版
        layout: "servera",
        name: "server",
    }
</script>

父模版 loyouts/servera.vue

<template>
    <!--命名其他头部和尾部模版-->
    <div>
        我是谁
        <!--<nuxt/> 和<router-view class="main"></router-view>一样-->
        <nuxt/>
    </div>
</template>

<script>
    export default {
        name: "head"
    }
</script>

<style scoped>

</style>