我是初学者Nuxt.js我正在将 Vue 项目转换为 Nuxt.js,并且我想在一个页面上使用两种布局(默认的一个和另一个)。逻辑是这样的:
第一个布局是(默认)或所有页面上的标题,第二个布局是设置栏.
In settings我的页面有 3 条路线(请参阅此处的项目结构:image https://i.stack.imgur.com/IQzAt.png):
- 设置/头像
- 设置/帐户
- 设置/关于
我想要设置栏三个路线相同。我可以将设置栏添加到所有三个子页面,例如:layout: 'settings-bar'
但随后无法设置标题布局。在我的 Vue 项目中,我仅在设置页面中使用:设置栏组件及以下<router-view></router-view>
更改组件。知道我该怎么做吗?在文档中找不到任何东西。请参阅此处的其他屏幕截图以更好地理解:
与此同时,在 Nuxt 中使用嵌套布局实际上是可行的:它有点老套且难以阅读,我不确定我是否会在更大范围内推荐它。尝试过,不推荐,但如果确实需要,这里是解决方案。
layouts/default.vue
<template>
<div>
<nuxt v-if="!$slots.default" />
<slot />
</div>
</template>
layouts/newLayout.vue
<template>
<default-layout>
<h1>Surrounding layout</h1>
<nuxt />
</default-layout>
</template>
<script>
import DefaultLayout from '~/layouts/default.vue';
export default {
components: {
DefaultLayout
}
}
</script>
然后,您可以在任何地方使用它
<script>
export default {
layout: 'newLayout' // name of your new layout
}
</script>
感谢这篇文章:https://constantsolutions.dk/2020/02/nested-layouts-in-nuxt-vue-js/ https://constantsolutions.dk/2020/02/nested-layouts-in-nuxt-vue-js/
不确定,但文章本身可能来自这个 github 帖子:https://github.com/nuxt/nuxt.js/issues/785#issuecomment-422365721 https://github.com/nuxt/nuxt.js/issues/785#issuecomment-422365721
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)