如何在 Nuxt 中动态设置页面布局

扫描二维码关注或者微信搜一搜：编程智域前端至全栈交流与成长

在使用 Nuxt 框架开发应用时，页面的布局往往是固定的，但有时我们可能需要根据不同的页面或条件来动态调整布局。

1. 什么是页面布局

在 Nuxt 中，页面布局是指页面的整体外观和结构，比如头部、导航、侧边栏以及底部等。使用布局可以帮助我们更好地管理页面样式和结构。

2. 使用 setPageLayout

setPageLayout 是一个用于动态设置页面布局的函数。需要注意的是，此函数只能在组件的 setup
函数、插件或路由中间件中使用。例如，我们可以根据用户的访问路径来设置不同的布局。

3. 基本使用方法

安装 Nuxt

首先，确保你已经安装了 Nuxt。你可以使用以下命令创建一个新的 Nuxt 项目：

1
2
3

npx nuxi@latest init nuxt-dynamic-layout
cd nuxt-dynamic-layout
npm install

创建布局文件

在 layouts 文件夹中创建两个布局文件，它们将用于不同的页面布局：

layouts/default.vue


<template>
  <div>
    <header>默认布局的头部</header>
    <nuxt/>
    <footer>默认布局的底部</footer>
  </div>
</template>

layouts/other.vue


<template>
  <div>
    <header>其它布局的头部</header>
    <nuxt/>
    <footer>其它布局的底部</footer>
  </div>
</template>

创建中间件

接下来，我们将创建一个中间件来动态设置布局。首先，在 middleware 文件夹中创建一个新的文件 custom-layout.ts。

middleware/custom-layout.ts

export default defineNuxtRouteMiddleware((to) => {
    // 根据访问的路径设置布局
    if (to.path === '/other') {
        setPageLayout('other');
    } else {
        setPageLayout('default');
    }
});

创建页面

现在我们需要创建两个页面，分别使用默认布局和其他布局。在 pages 文件夹中创建两个新的页面：

pages/index.vue


<template>
  <div>
    <h1>首页</h1>
    <nuxt-link to="/other">前往其它页面</nuxt-link>
  </div>
</template>

pages/other.vue


<template>
  <div>
    <h1>其它页面</h1>
    <nuxt-link to="/">返回首页</nuxt-link>
  </div>
</template>

配置中间件

最后一步是在 nuxt.config.ts 中配置我们的中间件，使其在路由导航时被调用。

nuxt.config.ts

export default defineNuxtConfig({
    router: {
        middleware: ['custom-layout']
    }
});

4. 运行项目

完成以上步骤后，你可以通过以下命令启动 Nuxt 项目：

1	npm run dev

打开浏览器，访问 http://localhost:3000。你会看到首页使用的是默认布局，点击链接进入其它页面时，页面布局将变为其它布局。

5. 结论

通过上述步骤，你已经了解到如何在 Nuxt 项目中动态设置页面布局。掌握这一功能可以使你的应用更加灵活，能够根据用户的需求展示不同的页面布局。

余下文章内容请点击跳转至个人博客页面或者扫码关注或者微信搜一搜：编程智域前端至全栈交流与成长，阅读完整的文章：