在NuxtJS中的布局之间共享一个页眉/页脚

Question

我有两个布局和一个页眉和页脚，我想在两者之间共享。我想减少重复的html标记。现在我必须将标题导入到两个布局中。这里的问题是标头有状态，当布局发生变化时，状态似乎会重置。一个例子是使用vuetify标签之类的东西。

编辑：更好的例子。

header.vue
|
|_ _ layout 1 (with video)
|
|_ _ layout 2 (with parallax)
|
footer.vue

两种布局具有不同的主体设置，但具有相同的标题。布局的问题是，从一个布局切换到另一个布局会导致客户端再次渲染所有内容，我不一定想要，因为它看起来很粗糙。

Answer 1

如注释所示(文档链接(，即使有不同的状态，您也可以将页眉和页脚放在一个位置。

我有一个页眉和页脚的布局。该页面使用Vuetify，在手机上显示v导航抽屉，在电脑上显示v工具栏。如果我在主页上，我将显示v-navigation抽屉和v-toolbar(v-if="$route.path=='/'；(：(layout/default.vue(

<template>
<v-app>
<v-navigation-drawer
v-if="$route.path === '/'"
v-model="drawer"
:mini-variant="miniVariant"
:clipped="clipped"
fixed
app
disable-resize-watcher
:key="navigation_drawer_key"
>
<v-list>
<v-list-tile
v-for="(link, i) in links"
:key="i"
:to="link.to"
router
exact
>
<v-list-tile-action>
<v-icon>{{ link.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="link.title" />
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar
v-if="$route.path === '/'"
:clipped-left="clipped"
scroll-off-screen
fixed
>
<v-toolbar-side-icon
@click="drawer = !drawer"
class="hidden-md-and-up"
/>
<div v-for="(link, i) in links" :key="i" class="hidden-sm-and-down">
<v-btn
flat
:to="link.to"
>
{{ link.title }}
</v-btn>
</div>
</v-toolbar>
<v-content>
<v-container>
<nuxt />
</v-container>
</v-content>
<v-footer>
This is my footer
</v-footer>
</v-app>
</template>
<script>
export default {
data() {
return {
clipped: false,
drawer: false,
fixed: false,
links: [
{
icon: 'home',
title: 'Home',
to: '/',
},
{
icon: 'apps',
title: 'products',
to: '/products',
},
{
icon: 'info',
title: 'Contact us',
to: '/contact',
},
],
navigation_drawer_key: 0,
miniVariant: false,
right: true,
rightDrawer: false
}
},
}
</script>

Answer 2

您为页眉和页脚创建组件，并在布局中使用它，并使用vuex存储状态，并在其中更改以不重置状态：

https://vuex.vuejs.org/