nuxtjs生命周期、项目创建、声明式导航与编程式导航、动态路由、嵌套路由、配置式路由、定制默认应用模板、扩展默认布局

news2024/11/27 13:40:15

文章目录

1. 介绍
2. 生命周期
3. 项目创建
4. 声明式导航和编程式导航
5. 动态路由参数和验证
6. 嵌套路由
7. 404页面
8. 配置式路由
9. 定制默认应用模板
10. 扩展默认布局
- 10.1 默认布局
- 10.2 自定义布局
- 10.3 显示错误的布局

1. 介绍

Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。作为框架，Nuxt.js 为客户端/服务端这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

Vue 2
Vue-Router 【约定式路由】
Vuex (当配置了 Vuex 状态树配置项时才会引入)
Vue 服务器端渲染
Vue-Meta

压缩并 gzip 后，总代码大小为：57kb （如果使用了 Vuex 特性的话为 60kb）。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。

2. 生命周期

在 vue 中，输入要访问的页面网址，回车之后 vue 会先做客户端渲染，然后发送网络请求，拿到数据，然后做相关处理后渲染出完整页面。

而在 nuxt 中，输入网址回车之后，会先发送请求给服务器，然后服务器会查找数据库，把数据得到之后，进行整理后生成 html ，然后发送给客户端。

在这里插入图片描述

3. 项目创建

yarn 安装：

yarn create nuxt-app < project-name >
cd project
yarn
yarn dev

npm 安装：

npm init nuxt-app <project-name>

在这里插入图片描述

4. 声明式导航和编程式导航

声明式导航：

<template>
  <div>
    <h3>首页</h3>
    <hr>
    <!-- 写法1 -->
    <!-- <router-link to="/about">关于</router-link> -->
    <!-- 写法2 -->
    <!-- nuxt-link 中的属性和 router-link 中的属性是一样的 -->
    <nuxt-link to="/about">关于</nuxt-link>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

编程式导航：

<template>
  <div>
    <h3>关于页面</h3>
    <hr>
    <button @click="goHome">去首页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

5. 动态路由参数和验证

首页：

<template>
  <div>
    <h3>首页</h3>
    <hr>
    <ul>
      <li v-for="item in news" :key="item.id">
        <nuxt-link :to="`/news/${item.id}`">{{ item.title }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: [
        { id: 1, title: '新闻1' },
        { id: 2, title: '新闻2' },
        { id: 3, title: '新闻3' }
      ]
    }
  },
}
</script>

<style lang="scss" scoped>

</style>

新闻页：

在这里插入图片描述

<template>
  <div>
    <!-- /news/:id => /news/100 -->
    <h3>根据id来得到当前页面</h3>
  </div>
</template>

<script>
export default {
  // 服务器渲染时可参数进行验证 -- 服务器端
  validate({ params, redirect }) {
    // 当为true时，则继续向下渲染，false停止
    // return /\d+/.test(params.id);
    if (/\d+/.test(params.id)) {
      return true
    }
    return redirect('/err')
  }
}
</script>

<style lang="scss" scoped>

</style>

错误页：

<template>
  <div>
    <h3>动态路由参数验证错误</h3>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

6. 嵌套路由

在这里插入图片描述

后台管理页：

<template>
  <div>
    <h3>我是一个后台</h3>
    <!-- 如果它是一个嵌套路由，则在此处一定要放置挂载点 -->
    <nuxt-child />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

用户路由：

<template>
  <div>
    <h3>/admin/user 路由</h3>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

7. 404页面

在这里插入图片描述

<template>
  <div>
    <!-- 如果你在layouts中有定义error.vue，也不会影响到它，它的404优先级更高 -->
    <!-- 只能处理404路由，客户端处理404，服务器返回的请求状态码200 -->
    <h3>404页面</h3>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

8. 配置式路由

在 nuxt.config.js 文件中添加配置：

// 路由配置 也可以进行配置式路由
router: {
    // 全局中间件注册
    // middleware: 'checklogin',
    // 动态添加路由
    extendRoutes(routes, resolve) {
        // 使用 push 添加要注意在pages中不能有_.vue这样的文件，否则路由匹配不成功
        // routes.push({
        //   path: '/abc',
        //   component: resolve(__dirname, 'pages/about.vue')
        // })

        // 如果你用_.vue，则需要用unshift方法来动态添加路由信息
        routes.unshift({
            path: '/abc',
            component: resolve(__dirname, 'pages/about.vue')
        })
    }
}

在这里插入图片描述

9. 定制默认应用模板

你可以定制化 Nuxt.js 默认的应用模板。定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>nuxtjs使用</title>
  <!-- reset.css -->
</head>

<body>
  <h3>我是模板</h3>
  {{APP}}
</body>

</html>

在这里插入图片描述

10. 扩展默认布局

10.1 默认布局

Nuxt.js 允许你扩展默认的布局，在 layout 目录下创建自定义的布局。可通过添加 layouts/default.vue 文件来扩展应用的默认布局。别忘了在布局文件中添加 <nuxt/> 组件用于显示页面的主体内容。

在这里插入图片描述

<template>
  <div>
    <!-- 它可以理解为子路由 嵌套路由 -->
    <h3>我是一个默认的全局布局文件</h3>
    <!-- 如果你用了全局布局，则在此处一定要添加一个挂载点 -->
    <nuxt />
  </div>
</template>

<script>
export default {
  // 路由独享
  // middleware: 'checklogin'
}
</script>

<style lang="scss" scoped>

</style>

假如现在有一个登录页面，如果不对布局进行配置，默认会显示全局布局文件：

<template>
  <div>
    <h3>登录页面</h3>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

在这里插入图片描述

10.2 自定义布局

现在我们在 layouts 目录下，创建一个 login.vue 布局文件（layouts/login.vue）：

<template>
  <div>
    <h1>aaaaaaaa</h1>
    <nuxt />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

并且在登录页面（pages/login.vue），添加自定义配置属性：

<template>
  <div>
    <h3>登录页面</h3>
  </div>
</template>

<script>
export default {
  // 此配置属性，可以自定义布局文件
  layout: 'login'
}
</script>

<style lang="scss" scoped>

</style>

这时就会显示自定义的布局配置：

在这里插入图片描述

假如我们不想在当前登录页面中使用任何布局，可以在 layouts 目录下创建 empty.vue 空布局文件：

<template>
  <nuxt />
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

然后再将登录页面中的布局配置修改为layout: 'empty'即可：

在这里插入图片描述

注意：app.html 中的应用模板还会显示。

10.3 显示错误的布局

你可以通过编辑 layouts/error.vue 文件来定制化错误页面。这个布局文件不需要包含 <nuxt/> 标签。你可以把这个布局文件当成是显示应用错误（404，500 等）的组件。

layouts/error.vue：

<template>
  <div>
    <!-- 它是以服务器端返回，返回http状态码 404 500 403 -->
    <h3>我是一个错误页面</h3>
  </div>
</template>

<script>
  export default {

  }
</script>

<style lang="scss" scoped>

</style>

pages/_.vue：

<template>
  <div>
    <!-- 如果你在layouts中有定义error.vue，也不会影响到它，它的404优先级更高 -->
    <!-- 只能处理404路由，客户端处理404，服务器返回的请求状态码200 -->
    <h3>404页面</h3>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>

</style>