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

文章目录

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

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
1
2
3
4

npm 安装：

npm init nuxt-app <project-name>
1

在这里插入图片描述

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

声明式导航：

<template>
  <div>
    <h3>首页h3>
    <hr>
    
    
    
    
    <nuxt-link to="/about">关于nuxt-link>
  div>
template>

<script>
export default {

}
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

编程式导航：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

新闻页：

在这里插入图片描述

<template>
  <div>
    
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

错误页：

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

<script>
export default {

}
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

6. 嵌套路由

在这里插入图片描述

后台管理页：

<template>
  <div>
    <h3>我是一个后台h3>
    
    <nuxt-child />
  div>
template>

<script>
export default {

}
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

用户路由：

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

<script>
export default {

}
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

7. 404页面

在这里插入图片描述

<template>
  <div>
    
    
    <h3>404页面h3>
  div>
template>

<script>
export default {
}
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

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')
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

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>
  
head>

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

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

10. 扩展默认布局

10.1 默认布局

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

在这里插入图片描述

<template>
  <div>
    
    <h3>我是一个默认的全局布局文件h3>
    
    <nuxt />
  div>
template>

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

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

<script>
export default {

}
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

10.2 自定义布局

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

<template>
  <div>
    <h1>aaaaaaaah1>
    <nuxt />
  div>
template>

<script>
export default {

}
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

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

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

在这里插入图片描述

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

<template>
  <nuxt />
template>

<script>
export default {

}
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

在这里插入图片描述

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

10.3 显示错误的布局

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

layouts/error.vue：

<template>
  <div>
    
    <h3>我是一个错误页面h3>
  div>
template>

<script>
  export default {

  }
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

pages/_.vue：

<template>
  <div>
    
    
    <h3>404页面h3>
  div>
template>

<script>
export default {
}
script>

<style lang="scss" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

最终结果会优先显示 pages 中的错误页面。如果想要显示 layouts 中的错误页面，则 pages 中的错误页面文件名不能使用下划线。

相关阅读:
Kerberos环境下命令行连接kafka 和zk
MySQL之JDBC编程
 Nivdia向量数据库图检索最新标杆——CAGRA
电力系统优化：数字孪生的革新方法
 Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript
【ACG】博主在专栏更新内容后,及时通知关注他的用户去阅读
 Linux-Nginx安装
 数组拆分-力扣561-C++
数据安全：.[bkpsvr@firemail.cc].EKING勒索病毒的特点和数据恢复方法
 Go for A Tour of Go 20230924 Day4
原文地址：https://blog.csdn.net/weixin_45605541/article/details/128105982