nuxt.js框架全面总结（1）

淡淡的烟草味﹌ 2023-10-02 13:35 29阅读 0赞

**目录**

第一章 Nuxt.js 简介

需求分析

了解搜索引擎优化 SEO

服务端渲染和客户端渲染（SSR）

什么是客户端渲染

什么是服务端渲染（SSR）

为什么使用服务器端渲染（SSR）

Vue.js 如何实现 SSR

什么是 Nuxt.js

为什么要使用 Nuxt.js

Nuxt.js 工作原理

Nuxt 生命周期流程图分析

第二章 搭建 Nuxt 环境和创建项目

开发环境

安装脚手架工具与创建项目

NPM 方式

NPX 方式

Nuxt运行命令

详解项目目录结构

目录结构

第三章 布局与错误页

自定义页面布局

组件布局

默认组件布局

自定义组件布局

重构默认组件布局 default.vue

定制错误页面

设置当前页面头部标签

第四章 插件 Plugin

注入 Vue 实例

注入 context

只在客户端使用的插件

在 easymock 上创建数据接口

首页请求数据接口

使用 async与await

Nuxt.js中配置代理解决跨域

$axios 拦截器

第六章 插件方式解耦在 NuxtJs 中调用 api

创建api插件 api/test.js

基础路由

动态路由

下划线为前缀的Vue文件

下划线为前缀的目录

第八章 中间件

什么是中间件

创建权限中间件

使用中间件

Nuxt 生命周期流程图分析

--------------------

##       第一章 Nuxt.js 简介 ##

官网：[https://zh.nuxtjs.org/][https_zh.nuxtjs.org]

###       需求分析 ###

采用 vue.js 开发的应用系统SEO不友好，需要解决SEO的问题

比如：新闻门户、博客系统有SEO的需求，希望被搜索引擎收录，百度排名靠前等。

###       了解搜索引擎优化 SEO ###

利用[搜索引擎][Link 1]的规则提高[网站][Link 2]在有关搜索引擎内的[自然排名][Link 3]。目的是让其在行业内占据领先地位，获得[品牌][Link 4]收益。 很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

采用什么技术可以利于 SEO 呢？下面要先理解服务端渲染和客户端渲染

###       服务端渲染和客户端渲染（SSR） ###

####       什么是客户端渲染 ####

1.  浏览器（客户端）通过 A JAX 向服务端(java servlet)发送 http请求数据接口。
2.  服务端将获取的接口数据封装成 JSON ，响应给浏览器。
3.  浏览器拿到JSON就进行渲染html页面，生成DOM元素，然后将页面展示给用户。

客户端渲染特点：

1.  服务端只响应数据，不生成 html 页面
2.  浏览器（客户端）负责发送请求获取服务端的数据，然后渲染成 html 页面。

####       什么是服务端渲染（SSR） ####

1.  浏览器（客户端）向服务端(java servlet)发送 http请求数据接口。
2.  服务端 （servlet ）会生成html页面，响应给浏览器。
3.  <table> 
     <tbody> 
      <tr> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table>
    
      
    浏览器直接将接收到html页面进行展示。

服务端渲染特点：

1.  在服务端生成 html 页面。
2.  浏览器（客户端）只负责显示 html 元素内容。

####       为什么使用服务器端渲染（SSR） ####

与传统的SPA（单页面应用程序）相比，服务端渲染的优势主要有哪些：

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

如果你的应用程序初始展示Loading菊花图，然后通过Ajax获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果SEO对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

更快的内容到达时间（首屏加载更快），因为服务端只需要返回渲染好的HTML，这部分代码量很小的，所以用户体验更好。

使用服务器端渲染(SSR)时还需要有一些权衡之处：

首先就是开发成本比较高，比如某些声明周期钩子函数（如beforeCreate、created）能同时运行在服务端和 客户端，因此第三方库要做特殊处理，才能在服务器渲染应用程序中运行。

由于服务端渲染要用Nodejs做中间层，所以部署项目时，需要处于Node.js server运行环境。在高流量环境下，还要做好服务器负载和缓存策略。

###       Vue.js 如何实现 SSR ###

1.  基于官方Vue SSR指南文档的官方方案，官方方案具有更直接的控制应用程序的结构，更深入底层，更加灵活，同时在使用官方方案的过程中，也会对Vue SSR有更加深入的了解。
2.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.95pt;"><span style="color:#333333;">NUXT</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:4pt;"><span style="color:#333333;">NUXT</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    vue.js 通用应用框架 ， 提供了平滑的开箱即用的体验，它建立在同等的 Vue.js 技术栈之上，但

抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过NUXT可以根据约定的规则，快速的实现Vue SSR。

###       什么是 Nuxt.js ###

Nuxt.js是一个基于Vue.js的通用应用框架。

通过对 客户端/服务端 基础框架的抽象组织，Nuxt.js主要关注的是应用的UI渲染。

Nuxt.js的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础代码结构。或者在已有的

Node.js项目中使用Nuxt.js。其中预设了利用Vue.js开发服务端渲染的应用所需的各种配置。

作为框架Nuxt.js为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

###       为什么要使用 Nuxt.js ###

主要是为了实现服务端的渲染（SSR），利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题。

###       Nuxt.js 工作原理 ###

1.  浏览器（客户端）发送 http 请求到 Node.js 服务端 。
2.  部署在 Node.js 的应用 Nuxt.js 接收到浏览器请求，它会去请求后台接口服务端。
3.  后台接口服务端会响应 JSON 数据，Nuxt.js 获取数据后进行服务端渲染成 html 。
4.  然后 Nuxt.js 将 html 页面响应给浏览器。
5.  浏览器直接将接收到html页面进行展示。

Nuxt.js 使用了 vue.js + webpack + babel 三大技术架构，集成了 Vue.js 中以下组件/框架，用于开发完整而强大的

Web 应用：

[Vue 2][]

[Vue-Router][]

[Vuex ][Vuex] ( 当配置了  [Vuex 状态树配置项 ][Vuex _] 时才会引入 )

[Vue 服务器端渲染 ][Vue _](排除使用 )

[Vue-Meta][]

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

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

### Nuxt 生命周期流程图分析 ###

下图是  Nuxt.js  应用一个完整的服务器请求到渲染（或用户通过 切换路由渲染页面）的流程：

**红框内的是****Nuxt****的生命周期****(****运行在服务端****)****，黄框内同时运行在服务端****&&****客户端上，绿框内则运行在客户端** 红框、黄框周期内的都不存在Window对象。

##       第二章 搭建 Nuxt 环境和创建项目 ##

###       开发环境 ###

1.  安 装 node.js & npm [Node.js][]
2.  安 装 Vscode [Visual Studio Code - Code Editing. Redefined][]

###       安装脚手架工具与创建项目 ###

为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。

####       NPM 方式 ####

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.85pt;"><span style="color:#333333;">create</span><span style="color:#333333;">-</span><span style="color:#333333;">nuxt</span><span style="color:#333333;">-</span><span style="color:#333333;">app</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    全局安装

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">$ npm </span><span style="color:#333333;">install </span><span style="color:#0000cc;">-g </span><span style="color:#333333;">create-nuxt-app</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如用的是 MAC 电脑，可能报错：permission denied, access '/usr/local/lib/node\_modules'

原因: 执行命令行命令时没有获得管理员权限，输入电脑的管理员密码（开机密码） 解决：命令前加上

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">$ sudo </span><span style="color:#3300aa;">npm </span><span style="color:#777777;">install </span><span style="color:#0000cc;">-g </span><span style="color:#777777;">create-nuxt-app</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">$ create</span><span style="color:#0000cc;">-nuxt-app </span><span style="color:#333333;">&lt;</span><span style="color:#333333;">项目名</span><span style="color:#333333;">&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

示例 :  创建 项目

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">$ create</span><span style="color:#0000cc;">-nuxt-app </span><span style="color:#333333;">nuxt-demo1</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  如需卸载 create-nuxt-app ，可执行下面命令

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#aa5400;"># windows</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">$ npm </span><span style="color:#333333;">uninstall </span><span style="color:#0000cc;">-g </span><span style="color:#333333;">create-nuxt-app</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#aa5400;"># MAC</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">$ sudo </span><span style="color:#3300aa;">npm </span><span style="color:#333333;">uninstall </span><span style="color:#0000cc;">-g </span><span style="color:#333333;">create-nuxt-app</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

####       NPX 方式 ####

确保安装了npx（npx在NPM版本5.2.0默认安装了），npx 是 npm 的高级版本，npx 具有更强大的功能。作用是避免全局安装模块：npx 临时安装一个 create-nuxt-app 模块，来初始化项目，使用过后会自动删除

create-nuxt-app 模块(下面不需要全局安装)

1.  直接初始化项目

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">$ npx </span><span style="color:#333333;">create-nuxt-app &lt;</span><span style="color:#333333;">项目名</span><span style="color:#333333;">&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

示例 :  创建 项目

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">$ npx </span><span style="color:#333333;">create-nuxt-app nuxt-demo2</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  当运行完时，它将安装所有依赖项，然后启动项目:

打开浏览器访问 http://localhost:3000 效果如下：

注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

###       Nuxt运行命令 ###

查看 package.json

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:22pt;"><span style="color:#aa1111;">"scripts"</span><span style="color:#333333;">: { </span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">开发环境</span></p> 
     <p style="margin-left:31.65pt;">"dev"<span style="color:#333333;">: </span><span style="color:#aa1111;">"nuxt"</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">打 包</span></p> 
     <p style="margin-left:31.65pt;">"build"<span style="color:#333333;">: </span><span style="color:#aa1111;">"nuxt build"</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">在服务端运行</span></p> 
     <p style="margin-left:31.65pt;">"start"<span style="color:#333333;">: </span><span style="color:#aa1111;">"nuxt start"</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">生成静态页面</span></p> 
     <p style="margin-left:31.65pt;">"generate"<span style="color:#333333;">: </span><span style="color:#aa1111;">"nuxt generate"</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">},</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

###  ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.45pt;"><span style="color:#333333;">nuxt.config.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

更改端口号与主机

如果默认

端口号被占用，可在

中更改端口号：

参考：[https://zh.nuxtjs.org/api/conﬁguration-server][https_zh.nuxtjs.org_api_con_guration-server]

更改后重启项目，然后访问 http://localhost:8000/

###       详解项目目录结构 ###

####       目录结构 ####

：执行

命令后编译的目录文件。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">assets</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.95pt;"><span style="color:#333333;">JavaScript</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

：用于组织未编译的静态资源如 、 或 。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">components</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#333333;">asyncData</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

：用于组织应用的  Vue.js  组件。 Nuxt.js  不会扩展增强该目录下  Vue.js  组件，即这些组件不会

像页面组件那样有 方法的特性。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">layouts</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

：用于组织应用的布局组件。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">middleware</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

：用于存放应用的中间件。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">node_modules</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

：用于存放项目的依赖包

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">pages</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

：用于组织应用的路由及视图。 Nuxt.js  框架读取该目录下所有的 文件并**自动生成对应的路由配置**。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">plugins</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

：用于组织那些需要在

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">static</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.8pt;"><span style="color:#333333;">static</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

：静态文件目录

实例化之前需要运行的 Javascript 插件

用于存放应用的静态文件，此类文件不会被  Nuxt.js  调用  Webpack  进行构

建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 下。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.6pt;"><span style="color:#333333;">/static/robots.txt</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:4pt;"><span style="color:#333333;">/robots.txt</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**举个例子** **:**  映射至

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">store</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.45pt;"><span style="color:#333333;">store</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#333333;">index.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

：用于组织应用的  [Vuex 状态树 ][Vuex _ 1] 文件。  Nuxt.js  框架集成了  [Vuex 状态树 ][Vuex _ 1] 的相关功能配置，在

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">.editorconfig</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

目录下创建一个

文件可激活这些配置。

：用于指定编辑器编写项目的代码风格

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#aa5400;"># editorconfig.org</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#aa5400;">#</span><span style="color:#aa5400;">项目里读</span><span style="color:#aa5400;">editorcongig</span><span style="color:#aa5400;">文件时，读到此文件即可，停止向上寻找配置文件</span><span style="color:#0000ff;">root </span><span style="color:#333333;">= </span><span style="color:#009900;">true</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;"><strong><span style="color:#0000ff;">[*]</span></strong></p> 
     <p style="margin-left:12.35pt;"><span style="color:#aa5400;">#</span><span style="color:#aa5400;">缩进风格：空格</span><span style="color:#0000ff;">indent_style </span><span style="color:#333333;">= </span><span style="color:#009900;">space </span><span style="color:#aa5400;">#</span><span style="color:#aa5400;">缩进大小</span><span style="color:#aa5400;">2</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">indent_size </span><span style="color:#333333;">= </span><span style="color:#009900;">2</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:12.35pt;"><span style="color:#aa5400;">#</span><span style="color:#aa5400;">换行符</span><span style="color:#aa5400;">lf</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">end_of_line </span><span style="color:#333333;">= </span><span style="color:#009900;">lf</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#aa5400;"># </span><span style="color:#aa5400;">字 符 集 </span><span style="color:#aa5400;">utf-8 </span><span style="color:#0000ff;">charset </span><span style="color:#333333;">= </span><span style="color:#009900;">utf-8</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#aa5400;">#</span><span style="color:#aa5400;">是否删除行尾的空格</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">trim_trailing_whitespace </span><span style="color:#333333;">= </span><span style="color:#009900;">true</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#aa5400;">#</span><span style="color:#aa5400;">是否在文件的最后插入一个空行</span><span style="color:#0000ff;">insert_final_newline </span><span style="color:#333333;">= </span><span style="color:#009900;">true</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;"><strong><span style="color:#0000ff;">[*.md]</span></strong></p> 
     <p style="margin-left:12.35pt;"><span style="color:#aa5400;"># </span><span style="color:#aa5400;">删除行尾空格 </span><span style="color:#aa5400;">= </span><span style="color:#aa5400;">否</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#0000ff;">trim_trailing_whitespace </span><span style="color:#333333;">= </span><span style="color:#009900;">false</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:2.8pt;"><span style="color:#333333;">.gitignore</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

文件用于指定哪些文件不被提交到 Git 仓库中。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">nuxt.config.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">package</span><span style="color:#333333;">-</span><span style="color:#333333;">lock.json</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

文件用于组织  Nuxt.js  应用的个性化配置，以便覆盖默认配置。文件用于描述应用具体的依赖版本

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">package.json</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

文件用于描述应用的依赖关系和对外暴露的脚本接口。

###  ###

别名

<table style="margin-left:53.5pt;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dfe1e4;width:276.85pt;"> <p style="margin-left:9.85pt;"><strong><span style="color:#333333;">别名</span></strong></p> </td> 
   <td style="background-color:#f8f8f8;border-color:#dfe1e4;width:212.3pt;"> <p style="margin-left:9.85pt;"><strong><span style="color:#333333;">目录</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dfe1e4;vertical-align:top;width:276.85pt;"> <p style="margin-left:9.85pt;"><span style="color:#333333;">~ </span><span style="color:#333333;">或 </span><span style="color:#333333;">@</span></p> </td> 
   <td style="vertical-align:top;width:212.3pt;"> <p style="margin-left:9.85pt;"><a href="https://zh.nuxtjs.org/api/configuration-srcdir" title="srcDir" rel="nofollow">srcDir</a></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#dfe1e4;vertical-align:top;width:276.85pt;"> <p style="margin-left:9.85pt;"><span style="color:#333333;">~~ </span><span style="color:#333333;">或 </span><span style="color:#333333;">@@</span></p> </td> 
   <td style="background-color:#f8f8f8;width:212.3pt;"> <p style="margin-left:9.85pt;"><span style="color:#000000;"><a href="https://zh.nuxtjs.org/api/configuration-rootdir" title="rootDir" rel="nofollow">rootDir</a></span></p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">srcDir</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.8pt;"><span style="color:#333333;">rootDir</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#777777;">static</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.8pt;"><span style="color:#777777;">~/assets/your_image.png</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

默认情况下， 和 相同。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.6pt;"><span style="color:#777777;">assets</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**提示** **:**  在您的  vue  模板中 ,  如果你需要引入 或者

~/static/your\_image.png 方式。

目录, 使用 和

##       第三章 布局与错误页 ##

###  ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:4pt;"><span style="color:#333333;">.nuxt/views/app.template.html</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

默认页面布局

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.85pt;"><span style="color:#333333;">npm run dev</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    当执行下：

后，在会生成一个默认的 html 模板页面

内容如

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#545454;">&lt;!DOCTYPE html&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;html </span><span style="color:#0000cc;">{ { HTML_ATTRS }}</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:22pt;"><span style="color:#117700;">&lt;head </span><span style="color:#0000cc;">{ { HEAD_ATTRS }}</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ { HEAD }}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#117700;">&lt;/head&gt;</span></p> 
     <p style="margin-left:22pt;"><span style="color:#117700;">&lt;body </span><span style="color:#0000cc;">{ { BODY_ATTRS }}</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#333333;">{ { APP }}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#117700;">&lt;/body&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/html&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

\{ \{ APP \}\} 渲染的是主体内容，就是 nuxt/nuxt-demo2/pages 下的页面组件

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.35pt;"><span style="color:#333333;">head</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    页面中的表达式引用的是 nuxt.conﬁg.js 文件中 属性值：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:1.35pt;text-align:center;">head<span style="color:#333333;">: { </span></p> 
     <p style="margin-left:31.65pt;">htmlAttrs<span style="color:#333333;">: { </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">对应 </span><span style="color:#aa5400;">{ { HTML_ATTRS }} </span><span style="color:#aa5400;">，</span><span style="color:#aa5400;">html</span><span style="color:#aa5400;">标签属性</span></p> 
     <p style="margin-left:41.3pt;">lang<span style="color:#333333;">: </span><span style="color:#aa1111;">'en'</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:31.65pt;">headAttrs<span style="color:#333333;">: { </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">对应 </span><span style="color:#aa5400;">{ { HEAD_ATTRS }}, head</span><span style="color:#aa5400;">标签属性</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">一般没有什么可设置的，随便设置个</span></p> 
     <p style="margin-left:41.3pt;">name<span style="color:#333333;">: </span><span style="color:#aa1111;">'headname'</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:41.3pt;">bodyAttrs<span style="color:#333333;">: { </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">对应 </span><span style="color:#aa5400;">{ { HOBDY_ATTRS }} body</span><span style="color:#aa5400;">标签属性</span>style<span style="color:#333333;">: </span><span style="color:#aa1111;">'background-color: green'</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">对应 </span><span style="color:#aa5400;">{ { HEAD }} </span><span style="color:#aa5400;">即 </span><span style="color:#aa5400;">head</span><span style="color:#aa5400;">标签体内容---- </span><span style="color:#aa5400;">start</span></p> 
     <p style="margin-left:31.65pt;">title<span style="color:#333333;">: </span><span style="color:#aa1111;">"</span><span style="color:#aa1111;">梦学谷博客社区站点</span><span style="color:#aa1111;">_IT</span><span style="color:#aa1111;">技术</span><span style="color:#aa1111;">"</span><span style="color:#333333;">, </span><span style="color:#aa5400;">// process.env.npm_package_name || '', // package.js</span></p> 
     <p style="margin-left:.5pt;text-align:center;"><span style="color:#aa5400;">的 </span><span style="color:#aa5400;">name</span></p> 
     <p style="margin-left:31.65pt;">meta<span style="color:#333333;">: [</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#333333;">{ </span>charset<span style="color:#333333;">: </span><span style="color:#aa1111;">'utf-8' </span><span style="color:#333333;">},</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#333333;">{ </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">'viewport'</span><span style="color:#333333;">, </span>content<span style="color:#333333;">: </span><span style="color:#aa1111;">'width=device-width, initial-scale=1' </span><span style="color:#333333;">},</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">{ </span>hid<span style="color:#333333;">: </span><span style="color:#aa1111;">'description'</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">'description'</span><span style="color:#333333;">, </span>content<span style="color:#333333;">: </span>process<span style="color:#333333;">.</span>env<span style="color:#333333;">.</span>npm_package_description <span style="color:#971a1a;">|| </span><span style="color:#aa1111;">'' </span><span style="color:#333333;">}</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">],</span></p> 
     <p style="margin-left:31.65pt;">link<span style="color:#333333;">: [</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#333333;">{ </span>rel<span style="color:#333333;">: </span><span style="color:#aa1111;">'icon'</span><span style="color:#333333;">, </span>type<span style="color:#333333;">: </span><span style="color:#aa1111;">'image/x-icon'</span><span style="color:#333333;">, </span>href<span style="color:#333333;">: </span><span style="color:#aa1111;">'/favicon.ico' </span><span style="color:#333333;">},</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#333333;">{ </span>rel<span style="color:#333333;">: </span><span style="color:#aa1111;">'stylesheet'</span><span style="color:#333333;">, </span>href<span style="color:#333333;">: </span><span style="color:#aa1111;">'//static.aliyin.com/service/css/element.css?v=123' </span><span style="color:#333333;">}</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">],</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">对应 </span><span style="color:#aa5400;">{ { HEAD }}</span><span style="color:#aa5400;">即 </span><span style="color:#aa5400;">head</span><span style="color:#aa5400;">标签体内容---- </span><span style="color:#aa5400;">end</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">},</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:4.05pt;"><span style="color:#777777;">pages/index.vuex</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    重新运行，访问 http://localhost:8000/ ，查看对应的都生效了。访问 http://localhost:8000/ 对应渲染的主体内容就是

###       自定义页面布局 ###

我们也可以定制化模板页面，只需要在应用根目录下创建一个 的文件，就可以覆盖  Nuxt.js  默认模板。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#545454;">&lt;!DOCTYPE html&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;html </span><span style="color:#0000cc;">{ { HTML_ATTRS }}</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:22pt;"><span style="color:#117700;">&lt;head </span><span style="color:#0000cc;">{ { HEAD_ATTRS }}</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ { HEAD }}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#117700;">&lt;/head&gt;</span></p> 
     <p style="margin-left:22pt;"><span style="color:#117700;">&lt;body </span><span style="color:#0000cc;">{ { BODY_ATTRS }}</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#117700;">&lt;h2&gt;</span><span style="color:#333333;">这是导航栏</span><span style="color:#117700;">&lt;/h2&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">&lt;!-- </span><span style="color:#aa5400;">主体内容 </span><span style="color:#aa5400;">--&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ { APP }}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#117700;">&lt;/body&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/html&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**创建** **app.html** **文件后，注意要重启项目**。 重新访问右上角多有文字出来。

上面这种  app.html  页面布局一般不能，因为实际项目中基本上使用 组件化文件开发。

###       组件布局 ###

####       默认组件布局 ####

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.45pt;"><span style="color:#333333;">layouts/default.vue</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Nuxt.js  可通过添加

nuxt 官方提供的默认布局源码如下：

文件来扩展应用的默认布局。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:6.15pt;text-align:center;"><span style="color:#117700;">&lt;template&gt;</span></p> 
     <p style="margin-left:1.3pt;text-align:center;"><span style="color:#117700;">&lt;div&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;nuxt /&gt;</span></p> 
     <p style="margin-left:6.15pt;text-align:center;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/template&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在布局文件中添加 组件用于显示页面的主体内容。

####       自定义组件布局 ####

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#333333;">layouts</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.4pt;"><span style="color:#333333;">layout</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 目录中的创建 文件来自定义布局， 然后通过页面组件（ pages 目录下的文件）中的

属性来引用自定义布局。

示例：

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.85pt;"><span style="color:#333333;">layouts/blog.vue</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    下面我们创建

文件，在其中定义一个博客上下结构的布局文，如下：

注意：在布局文件中添加 组件 ,  用于显示页面的主体内容。

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.5pt;"><span style="color:#333333;">layout</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.55pt;"><span style="color:#777777;">layout</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.8pt;"><span style="color:#777777;">default</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    在 pages 目录下面的页面组件通过默认值是

属性引用自定义组件布局，如

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.75pt;"><span style="color:#333333;">pages/article.vue</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

注意不写 layout ，则页面组件默认采用的是 default.vue 布局

上面参数 context 上下文对象可获取的属性参考：[Nuxt - The context][]/

1.  删除根目录下创建的 app.html 页面布局文件，组件布局才会生效。
2.  重启项目，再访问http://localhost:8000/article 注意访问 /article

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.85pt;"><strong><span style="color:#333333;">layouts/blog</span></strong></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:4pt;"><strong><span style="color:#333333;">layout: 'blog'</span></strong></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    注意：如果是

**目录下放了** **index.vue** **，直接通过**

是找不到这个页面的，需

**要指定文件名** **index** **才找得到，即** **layout: 'blog/index'** **。如下图：**

####       重构默认组件布局 default.vue ####

1.  修改 layouts/default.vue 默认布局，分为头部导航、和主体内容

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;template&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;div&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">&lt;!-- </span><span style="color:#aa5400;">头部导航 </span><span style="color:#aa5400;">--&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;div </span><span style="color:#0000cc;">class</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"header"</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;ul&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;a </span><span style="color:#0000cc;">href</span><span style="color:#333333;">=</span><span style="color:#aa1111;">""</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">首页</span><span style="color:#117700;">&lt;/a&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;a </span><span style="color:#0000cc;">href</span><span style="color:#333333;">=</span><span style="color:#aa1111;">""</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">文章</span><span style="color:#117700;">&lt;/a&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;a </span><span style="color:#0000cc;">href</span><span style="color:#333333;">=</span><span style="color:#aa1111;">""</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">问答</span><span style="color:#117700;">&lt;/a&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;a </span><span style="color:#0000cc;">href</span><span style="color:#333333;">=</span><span style="color:#aa1111;">""</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">个人中心</span><span style="color:#117700;">&lt;/a&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/ul&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">&lt;!-- </span><span style="color:#aa5400;">主体内容 </span><span style="color:#aa5400;">--&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;nuxt /&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:1.35pt;text-align:center;"><span style="color:#117700;">&lt;/template&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  为 layouts/default.vue 默认布局添加样式

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:1.35pt;text-align:center;"><span style="color:#333333;">&lt;</span><span style="color:#117700;">style</span><span style="color:#333333;">&gt;</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">* { </span></p> 
     <p style="margin-left:41.3pt;text-align:center;">margin<span style="color:#333333;">: </span><span style="color:#116644;">0 </span><span style="color:#211199;">auto</span><span style="color:#333333;">; </span>font-size<span style="color:#333333;">: </span><span style="color:#116644;">18px</span><span style="color:#333333;">;</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#545454;">.header </span><span style="color:#333333;">{ </span>width<span style="color:#333333;">: </span><span style="color:#116644;">100%</span><span style="color:#333333;">; </span>height<span style="color:#333333;">: </span><span style="color:#116644;">50px</span><span style="color:#333333;">;</span></p> 
     <p style="margin-left:31.65pt;">background-color<span style="color:#333333;">: </span><span style="color:#770087;">black</span><span style="color:#333333;">;</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#545454;">.header </span><span style="color:#117700;">ul </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:31.65pt;">margin-left<span style="color:#333333;">: </span><span style="color:#116644;">80px</span><span style="color:#333333;">;</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#545454;">.header </span><span style="color:#117700;">li </span><span style="color:#333333;">{ </span>display<span style="color:#333333;">: </span><span style="color:#211199;">inline</span><span style="color:#333333;">; </span>line-height<span style="color:#333333;">: </span><span style="color:#116644;">50px</span><span style="color:#333333;">; </span>margin-left<span style="color:#333333;">: </span><span style="color:#116644;">60px</span><span style="color:#333333;">;</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#545454;">.header </span><span style="color:#117700;">a </span><span style="color:#333333;">{ </span>color<span style="color:#333333;">: </span><span style="color:#211199;">#fff</span><span style="color:#333333;">;</span></p> 
     <p style="margin-left:31.65pt;">text-decoration<span style="color:#333333;">: </span><span style="color:#211199;">none</span><span style="color:#333333;">; </span><span style="color:#aa5400;">/* </span><span style="color:#aa5400;">去除下划线 </span><span style="color:#aa5400;">*/</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#545454;">.header </span><span style="color:#117700;">a</span><span style="color:#333333;">:</span><span style="color:#008754;">hover </span><span style="color:#333333;">{ </span>color<span style="color:#333333;">: </span><span style="color:#770087;">aqua</span><span style="color:#333333;">;</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:6.2pt;text-align:center;"><span style="color:#333333;">&lt;/</span><span style="color:#117700;">style</span><span style="color:#333333;">&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  <table> 
     <tbody> 
      <tr> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table>
    
      
    访问首页 http://localhost:8000/ 浏览效果

###       定制错误页面 ###

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.85pt;"><span style="color:#333333;">layouts/error.vue</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    通过编辑

**警告****:** 虽然此文件放在

文件来定制化错误页面（404，500等）。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.9pt;"><span style="color:#333333;">layouts</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

文件夹中 ,  但应该将它看作是一个**页面** **(page)**  ，而不是布局使用。

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.85pt;"><span style="color:#333333;">layouts/error.vue</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    示例

1.  <table> 
     <tbody> 
      <tr> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table>
    
      
    发送一个错误的请求：http://localhost:8000/test 响应401

###       设置当前页面头部标签 ###

使用 方法设置当前页面的头部标签。

在  方法里可通过签。

关键字来获取组件的数据，你可以利用页面组件的数据来设置个性化的 标

1.  修改首页组件 page/index.vue

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;template&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;div&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;h3&gt;</span><span style="color:#333333;">这是主体内容</span><span style="color:#333333;">-</span><span style="color:#333333;">首页</span><span style="color:#117700;">&lt;/h3&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/template&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;script&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span></p> 
     <p></p> 
     <p style="margin-left:31.65pt;">data<span style="color:#333333;">() { </span><span style="color:#770087;">return </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">title<span style="color:#333333;">: </span><span style="color:#aa1111;">'</span><span style="color:#aa1111;">博客文章列表页</span><span style="color:#aa1111;">'</span></p> 
     <p style="margin-left:0cm;text-align:center;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">},</span></p> 
     <p></p> 
     <p style="margin-left:22pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">使用 </span><span style="color:#aa5400;">head </span><span style="color:#aa5400;">方法设置当前页面的头部标签。</span></p> 
     <p style="margin-left:22pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">在 </span><span style="color:#aa5400;">head </span><span style="color:#aa5400;">方法里可通过 </span><span style="color:#aa5400;">this </span><span style="color:#aa5400;">关键字来获取组件的数据，你可以利用页面组件的数据来设置个性化的 </span><span style="color:#aa5400;">meta </span><span style="color:#aa5400;">标签</span></p> 
     <p style="margin-left:31.65pt;">head <span style="color:#333333;">() { </span><span style="color:#770087;">return </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">bodyAttrs<span style="color:#333333;">: { </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">对应 </span><span style="color:#aa5400;">{ { HOBDY_ATTRS }} body</span><span style="color:#aa5400;">标签属性</span></p> 
     <p style="margin-left:50.95pt;">style<span style="color:#333333;">: </span><span style="color:#aa1111;">'background-color: #fff'</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:41.3pt;">title<span style="color:#333333;">: </span><span style="color:#770087;">this</span><span style="color:#333333;">.</span>title<span style="color:#333333;">, </span>meta<span style="color:#333333;">: [</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#aa5400;">// hid </span><span style="color:#aa5400;">指定标识，防止不能覆盖父组件的 </span><span style="color:#aa5400;">&lt;meta name="description" &gt; </span><span style="color:#aa5400;">标签，</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#aa5400;">// hid: 'description' </span><span style="color:#aa5400;">就会覆盖父组件中的属性为 </span><span style="color:#aa5400;">name="description" </span><span style="color:#aa5400;">的</span><span style="color:#aa5400;">meta</span><span style="color:#aa5400;">标签</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#333333;">{ </span>hid<span style="color:#333333;">: </span><span style="color:#aa1111;">'description'</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">'description'</span><span style="color:#333333;">, </span>content<span style="color:#333333;">: </span><span style="color:#aa1111;">'nuxt.js</span><span style="color:#aa1111;">技术栈</span><span style="color:#aa1111;">' </span><span style="color:#333333;">}</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#333333;">]</span></p> 
     <p style="margin-left:0cm;text-align:center;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/script&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

注意：为了避免子组件中的 meta 标签，不能正确覆盖父组件中相同的 name 名称的 meta 标签，而产生重复 meta 的

现象，可使用

键指定要覆盖的父组件name值与hid相同的meta标签。请阅读[关于 ][Link 5]

[ 的更多信息][Link 5]。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:-.2pt;"><span style="color:#333333;">如上面 </span><span style="color:#333333;">hid: 'description'</span></p> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">&lt;meta name="description"&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.5pt;"><span style="color:#333333;">name="description"</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

就会覆盖父组件中的属性为 的 meta 标签，不会出现多个的

##       第四章 插件 Plugin ##

*Nuxt.js*允许您在运行*Vue.js*应用程序之前执行*js*插件。这在您需要使用自己的库或第三方模块时特别有用。

可以将自定义插件注入到 Vue 实例（客户端），context（服务器端）、store(Vuex)。

新增的属性或方法名使用 作为前缀。

###       注入 Vue 实例 ###

将内容注入Vue实例，避免重复引入，在Vue原型上挂载注入一个函数，所有组件内都可以访问(**不包含服务器端**)。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">plugins/vue</span><span style="color:#333333;">-</span><span style="color:#333333;">inject.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#770087;">import </span><span style="color:#0000ff;">Vue </span><span style="color:#770087;">from </span><span style="color:#aa1111;">'vue'</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;">Vue<span style="color:#333333;">.</span>prototype<span style="color:#333333;">.</span>$myVueFunction <span style="color:#971a1a;">= </span><span style="color:#0000ff;">string </span><span style="color:#971a1a;">=&gt; </span>console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#aa1111;">'</span><span style="color:#aa1111;">绑定到</span><span style="color:#aa1111;">Vue</span><span style="color:#aa1111;">实例的方法参数</span><span style="color:#aa1111;">'</span><span style="color:#333333;">, </span><span style="color:#0054aa;">string</span><span style="color:#333333;">)</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">nuxt.config.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这样，您就可以在所有Vue组件中使用该函数。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">plugin</span><span style="color:#333333;">-</span><span style="color:#333333;">vue.vue</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:22pt;">export <span style="color:#770087;">default </span><span style="color:#333333;">{ </span>mounted <span style="color:#333333;">() { </span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">this</span><span style="color:#333333;">.</span>$myVueFunction<span style="color:#333333;">(</span><span style="color:#aa1111;">'test'</span><span style="color:#333333;">)</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

###       注入 context ###

context注入方式和在其它vue应用程序中注入类似。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">plugins/ctx</span><span style="color:#333333;">-</span><span style="color:#333333;">inject.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">nuxt.config.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

现在，只要您获得context，你就可以使用该函数。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">plugin</span><span style="color:#333333;">-</span><span style="color:#333333;">ctx.vue</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:22pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span>asyncData <span style="color:#333333;">(</span><span style="color:#0000ff;">context</span><span style="color:#333333;">) { </span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#0054aa;">context</span><span style="color:#333333;">.</span>app<span style="color:#333333;">.</span>myContextFunction<span style="color:#333333;">(</span><span style="color:#aa1111;">'ctx!'</span><span style="color:#333333;">)</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

###  ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.35pt;"><strong><span style="color:#333333;">context</span></strong></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

同时注入在 ， ， 实例

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">context</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.6pt;"><span style="color:#333333;">inject</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如果您需要同时在

， 实例，甚至 Vuex 中同时注入，您可以使用

方法,它是plugin导出函数的

第二个参数。 将内容注入Vue实例的方式与在Vue应用程序中进行注入类似。系统会自动将面。

添加到方法名的前

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">plugins/all</span><span style="color:#333333;">-</span><span style="color:#333333;">inject.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">({ </span><span style="color:#0000ff;">app </span><span style="color:#333333;">}, </span><span style="color:#0000ff;">inject</span><span style="color:#333333;">) </span><span style="color:#971a1a;">=&gt; </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:22pt;"><span style="color:#0054aa;">inject</span><span style="color:#333333;">(</span><span style="color:#aa1111;">'myAllFunction'</span><span style="color:#333333;">, </span><span style="color:#0000ff;">string </span><span style="color:#971a1a;">=&gt; </span>console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#aa1111;">'</span><span style="color:#aa1111;">绑定到</span><span style="color:#aa1111;">Context</span><span style="color:#aa1111;">和</span><span style="color:#aa1111;">Vue</span><span style="color:#aa1111;">的方法参数</span><span style="color:#aa1111;">'</span><span style="color:#333333;">, </span><span style="color:#0054aa;">string</span><span style="color:#333333;">))</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">nuxt.config.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:-.2pt;"><span style="color:#333333;">现在您就可以在 </span><span style="color:#333333;">context</span></p> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">myAllFunction </span><span style="color:#333333;">方法。</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

，或者

实例中的

，或者 的

方法中的

来调用

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.35pt;"><span style="color:#333333;">actions/mutations</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">plugin</span><span style="color:#333333;">-</span><span style="color:#333333;">all.vue</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:22pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span>mounted <span style="color:#333333;">() { </span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">this</span><span style="color:#333333;">.</span>$myAllFunction<span style="color:#333333;">(</span><span style="color:#aa1111;">'mounted</span><span style="color:#aa1111;">钩子调用</span><span style="color:#aa1111;">myAllFunction'</span><span style="color:#333333;">)</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:22pt;">asyncData <span style="color:#333333;">(</span><span style="color:#0000ff;">context</span><span style="color:#333333;">) { </span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#0054aa;">context</span><span style="color:#333333;">.</span>app<span style="color:#333333;">.</span>$myAllFunction<span style="color:#333333;">(</span><span style="color:#aa1111;">'asyncData</span><span style="color:#aa1111;">调用</span><span style="color:#aa1111;">myAllFunction'</span><span style="color:#333333;">)</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

###       只在客户端使用的插件 ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:22pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span>plugins<span style="color:#333333;">: [</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ </span>src<span style="color:#333333;">: </span><span style="color:#aa1111;">'~/plugins/combined-inject.js' </span><span style="color:#333333;">},</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ </span>src<span style="color:#333333;">: </span><span style="color:#aa1111;">'~/plugins/combined-inject.js'</span><span style="color:#333333;">, </span>mode<span style="color:#333333;">: </span><span style="color:#aa1111;">'client' </span><span style="color:#333333;">}, </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">插件只会在客户端运行。</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ </span>src<span style="color:#333333;">: </span><span style="color:#aa1111;">'~/plugins/combined-inject.js'</span><span style="color:#333333;">, </span>mode<span style="color:#333333;">: </span><span style="color:#aa1111;">'server' </span><span style="color:#333333;">}, </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">插件只会在服务端运行。</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">]</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**第五章 异步加载数据** **asyncData**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.65pt;"><strong><span style="color:#333333;">asyncData</span></strong></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

***Nuxt.js***  扩展了  ***Vue.js*** ， 增加 了 一 个 叫 的 方 法 ， 使得我们 可 以 在 **渲染组件之前异步获取数据。**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">asyncData</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#333333;">context</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.65pt;"><span style="color:#333333;">asyncData</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

方法会在组件（**限于页面组件**）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.45pt;"><span style="color:#333333;">asyncData</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

个方法被调用的时候，第一个参数

被设定为当前页面的[上下文对象][Link 6]，你可以利用

方法来获取

数据，Nuxt.js 会将

返回的数据与

方法返回的数据一起合并后返回给当前组件。

调用后台数据接口我们采用 axios 异步发送请求，所以下面我们要先安装它。

###  ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><strong><span style="color:#333333;">@nuxtjs/axios</span></strong></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

安装

参考官网：[Introduction - Axios Module][]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.45pt;"><span style="color:#333333;">@nuxtjs/axios</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Nuxt.js  官方提供了 模块，此模块中还包含了  axios  、 @nuxtjs/proxy  模块。其中  @nuxtjs/proxy

是解决 Nuxt 中跨域问题，进行代理转发请求。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#333333;">@nuxtjs/axios</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

所以我们只要安装 即可：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#3300aa;">npm </span><span style="color:#333333;">install @nuxtjs/axios</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  在 nuxt.conﬁg.js 引入 @nuxtjs/axios 模块

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:31.65pt;">modules<span style="color:#333333;">: [ </span><span style="color:#aa1111;">'@nuxtjs/axios'</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">],</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

###       在 easymock 上创建数据接口 ###

访问 [http://mock.mengxuegu.com][http_mock.mengxuegu.com]/ 创建数据接口

get 请求 /test 接口，响应如下数据

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p><span style="color:#aa1111;">"code"</span><span style="color:#333333;">: </span><span style="color:#116644;">20000</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:0cm;"><span style="color:#aa1111;">"message"</span><span style="color:#333333;">: </span><span style="color:#aa1111;">"</span><span style="color:#aa1111;">成功</span><span style="color:#aa1111;">"</span><span style="color:#333333;">, </span><span style="color:#aa1111;">"data"</span><span style="color:#333333;">: { </span></p> 
     <p style="margin-left:9.6pt;"><span style="color:#aa1111;">"title"</span><span style="color:#333333;">: </span><span style="color:#aa1111;">"@ctitle"</span><span style="color:#333333;">, </span><span style="color:#aa1111;">"content"</span><span style="color:#333333;">: </span><span style="color:#aa1111;">"@cparagraph"</span><span style="color:#333333;">, </span><span style="color:#aa1111;">"author"</span><span style="color:#333333;">: </span><span style="color:#aa1111;">"@cname"</span></p> 
     <p><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Base URL + 接口 URL 就是调用地址

http://mengxuegu.com:7300/mock/5ea4394b2a2f716419f893be/blog-web/test

###       首页请求数据接口 ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.45pt;"><span style="color:#333333;">asyncData</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#333333;">Promise</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.75pt;"><span style="color:#333333;">Promise</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Nuxt.js  提供了几种不同的方法来使用 方法，你可以选择自己熟悉的一种来用：

1.  返回一个

, nuxt.js会等待该

被解析之后才会设置组件的数据，从而渲染组件.

1.  使用 [async 或 await ][async _ await]([了解更多][Link 7])

####  ####

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><strong><span style="color:#333333;">Promise</span></strong></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

使用  axios  返回

1.  注意 ：因为 asyncData方法是在当前组件加载之前被调用，不能在 asyncData 方法体中用 this 传值
2.  在 nuxt-demo2/pages/index.vue 添加如下代码：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;template&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;div </span><span style="color:#0000cc;">class</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"container"</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;h2&gt; </span><span style="color:#333333;">首页标题： </span><span style="color:#333333;">{ {title}}</span><span style="color:#117700;">&lt;/h2&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;ul&gt;</span></p> 
     <p style="margin-left:60.6pt;"><span style="color:#117700;">&lt;li&gt;</span><span style="color:#333333;">标题：</span><span style="color:#333333;">{ {data.title}}</span><span style="color:#117700;">&lt;/li&gt;</span></p> 
     <p style="margin-left:60.6pt;"><span style="color:#117700;">&lt;li&gt;</span><span style="color:#333333;">内容：</span><span style="color:#333333;">{ {data.content}}</span><span style="color:#117700;">&lt;/li&gt;</span></p> 
     <p style="margin-left:60.6pt;"><span style="color:#117700;">&lt;li&gt;</span><span style="color:#333333;">作者：</span><span style="color:#333333;">{ {data.author}}</span><span style="color:#117700;">&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;/ul&gt;</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/template&gt;</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;script&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span></p> 
     <p></p> 
     <p style="margin-left:31.65pt;">data<span style="color:#333333;">() { </span><span style="color:#770087;">return </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">title<span style="color:#333333;">: </span><span style="color:#aa1111;">'</span><span style="color:#aa1111;">博客文章列表页</span><span style="color:#aa1111;">'</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">},</span></p> 
     <p></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">加载组件之前服务端会调用</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">方式</span><span style="color:#aa5400;">1</span><span style="color:#aa5400;">：使用了两个</span><span style="color:#aa5400;">return</span></p> 
     <p style="margin-left:22pt;">asyncData<span style="color:#333333;">({ </span><span style="color:#0000ff;">$axios</span><span style="color:#333333;">}) { </span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#770087;">return </span><span style="color:#0054aa;">$axios</span><span style="color:#333333;">.</span>$get<span style="color:#333333;">(</span><span style="color:#aa1111;">'http://mengxuegu.com:7300/mock/5ea4394b2a2f716419f893be/blog- web/test'</span><span style="color:#333333;">)</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#333333;">.</span>then<span style="color:#333333;">(</span><span style="color:#0000ff;">response </span><span style="color:#971a1a;">=&gt; </span><span style="color:#333333;">{ </span>console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#aa1111;">'response'</span><span style="color:#333333;">, </span><span style="color:#0054aa;">response</span><span style="color:#333333;">) </span><span style="color:#770087;">const </span><span style="color:#0000ff;">data </span><span style="color:#971a1a;">= </span><span style="color:#0054aa;">response</span><span style="color:#333333;">.</span>data</p> 
     <p style="margin-left:41.3pt;"><span style="color:#770087;">return </span><span style="color:#333333;">{ </span>data <span style="color:#333333;">}</span><span style="color:#aa5400;">// {data: data}</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">})</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#aa5400;">// head</span><span style="color:#aa5400;">省略</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/script&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#333333;">$axios</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.35pt;"><span style="color:#333333;">return</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.6pt;"><span style="color:#333333;">return $axios.$get</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如果一直渲染不出数据，检查接口地址，或者

1.  访问首页 http://localhost:8000/ 效果

前面少了

，正常的是

####       使用 async与await ####

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span></p> 
     <p></p> 
     <p style="margin-left:22pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">方式</span><span style="color:#aa5400;">2 </span><span style="color:#aa5400;">请求数据接口 </span><span style="color:#aa5400;">async await </span>async asyncData<span style="color:#333333;">( { </span><span style="color:#0000ff;">$axios</span><span style="color:#333333;">} ) { </span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">const </span><span style="color:#0000ff;">response </span><span style="color:#971a1a;">= </span><span style="color:#770087;">await</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#0054aa;">$axios</span><span style="color:#333333;">.</span>$get<span style="color:#333333;">(</span><span style="color:#aa1111;">'http://mengxuegu.com:7300/mock/5ea4394b2a2f716419f893be/blog-web/test'</span><span style="color:#333333;">) </span>console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#aa1111;">'response'</span><span style="color:#333333;">, </span><span style="color:#0054aa;">response</span><span style="color:#333333;">)</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">return </span><span style="color:#333333;">{ </span>data<span style="color:#333333;">: </span><span style="color:#0054aa;">response</span><span style="color:#333333;">.</span>data<span style="color:#333333;">}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

访问首页 http://localhost:8000/ 效果一样。

###       Nuxt.js中配置代理解决跨域 ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.8pt;"><span style="color:#333333;">proxyTable</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如果调用后台接口有跨域问题，需要对请求地址进行代理转发才可解决。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.35pt;"><span style="color:#333333;">vue.config.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">nuxt.config.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

我们知道在 vue-cli 中配置代理很方便，只需要在

中找到

添加即可，而在nuxt中同样需

要修改 配置文件，前提要安装了 @nuxtjs/axios 。参考 [https://axios.nuxtjs.org][Introduction - Axios Module]/

1.  在 nuxt.conﬁg.js 中开启代理配置

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:22pt;">modules<span style="color:#333333;">: [ </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">数 组</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa1111;">'@nuxtjs/axios'</span><span style="color:#333333;">, </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">引用模块</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">],</span></p> 
     <p></p> 
     <p style="margin-left:22pt;">axios<span style="color:#333333;">: { </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">对 象</span></p> 
     <p style="margin-left:31.65pt;">proxy<span style="color:#333333;">: </span><span style="color:#211199;">true </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">开启代理</span></p> 
     <p style="margin-left:31.65pt;">prefix<span style="color:#333333;">: </span><span style="color:#aa1111;">'/api' </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">请求前缀</span></p> 
     <p></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">},</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>proxy<span style="color:#333333;">:{ </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">对 象</span></p> 
     <p style="margin-left:9.6pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">将 </span><span style="color:#aa5400;">/api </span><span style="color:#aa5400;">替换为 </span><span style="color:#aa5400;">'', </span><span style="color:#aa5400;">然后代理转发到 </span><span style="color:#aa5400;">target </span><span style="color:#aa5400;">指定的 </span><span style="color:#aa5400;">url</span></p> 
     <p style="margin-left:9.6pt;"><span style="color:#aa1111;">'/api'</span><span style="color:#333333;">: { </span></p> 
     <p style="margin-left:24.1pt;">target<span style="color:#333333;">: </span><span style="color:#aa1111;">'http://mengxuegu.com:7300/mock/5ea4394b2a2f716419f893be/blog-web'</span><span style="color:#333333;">, </span>pathRewrite<span style="color:#333333;">: { </span><span style="color:#aa1111;">'^/api'</span><span style="color:#333333;">: </span><span style="color:#aa1111;">''</span><span style="color:#333333;">}</span></p> 
     <p style="margin-left:9.65pt;"><span style="color:#333333;">}</span></p> 
     <p><span style="color:#333333;">}, </span><span style="color:#aa5400;">// </span><span style="color:#aa5400;">逗 号</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#777777;">pathRewrite</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

选项 ( 重写地址 )

将被添加到 API 端点的所有请求中。可以使用

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.45pt;"><span style="color:#777777;">pathRewrite</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

选项删除。

因为在  ajax  的  url  中加了前缀 ，而原本的接口是没有这个前缀的。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.45pt;"><span style="color:#777777;">pathRewrite</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

所以需要通过  pathRewrite  来重写地址，将前缀 转为 或者是 。

如果本身的接口地址就有

这种通用前缀，就可以把

删掉。

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.55pt;"><span style="color:#333333;">/test</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    在 nuxt-demo2/pages/index.vue 修改请求接口 ：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span></p> 
     <p></p> 
     <p style="margin-left:22pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">方式</span><span style="color:#aa5400;">2 </span><span style="color:#aa5400;">请求数据接口 </span><span style="color:#aa5400;">async await </span>async asyncData<span style="color:#333333;">({ </span><span style="color:#0000ff;">$axios</span><span style="color:#333333;">, </span><span style="color:#0000ff;">error</span><span style="color:#333333;">}) { </span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">try </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#770087;">const </span><span style="color:#0000ff;">response </span><span style="color:#971a1a;">= </span><span style="color:#770087;">await </span><span style="color:#0054aa;">$axios</span><span style="color:#333333;">.</span>$get<span style="color:#333333;">(</span><span style="color:#aa1111;">'/test'</span><span style="color:#333333;">) </span><span style="color:#770087;">return </span><span style="color:#333333;">{ </span>data<span style="color:#333333;">: </span><span style="color:#0054aa;">response</span><span style="color:#333333;">.</span>data<span style="color:#333333;">.</span>data<span style="color:#333333;">}</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">} </span><span style="color:#770087;">catch </span><span style="color:#333333;">(</span><span style="color:#0000ff;">e</span><span style="color:#333333;">) { </span></p> 
     <p style="margin-left:46.1pt;"><span style="color:#0054aa;">error</span><span style="color:#333333;">({ </span>statusCode<span style="color:#333333;">: </span><span style="color:#116644;">404</span><span style="color:#333333;">, </span>message<span style="color:#333333;">: </span><span style="color:#aa1111;">'</span><span style="color:#aa1111;">未找到请求资源。</span><span style="color:#aa1111;">'</span><span style="color:#333333;">})</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">},</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  请求 http://localhost:8000/

###       $axios 拦截器 ###

1.  创建 plugins/interceptor.js 请求拦截器

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">({ </span><span style="color:#0000ff;">store</span><span style="color:#333333;">, </span><span style="color:#0000ff;">route</span><span style="color:#333333;">, </span><span style="color:#0000ff;">redirect</span><span style="color:#333333;">, </span><span style="color:#0000ff;">$axios</span><span style="color:#333333;">}) </span><span style="color:#971a1a;">=&gt; </span><span style="color:#333333;">{ </span></p> 
     <p></p> 
     <p style="margin-left:22pt;"><span style="color:#0054aa;">$axios</span><span style="color:#333333;">.</span>onRequest<span style="color:#333333;">( </span><span style="color:#0000ff;">config </span><span style="color:#971a1a;">=&gt; </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#aa1111;">'</span><span style="color:#aa1111;">请求拦截器</span><span style="color:#aa1111;">'</span><span style="color:#333333;">) </span><span style="color:#770087;">return </span><span style="color:#0054aa;">config</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p><span style="color:#333333;">})</span></p> 
     <p></p> 
     <p style="margin-left:9.6pt;"><span style="color:#0054aa;">$axios</span><span style="color:#333333;">.</span>onResponse<span style="color:#333333;">( </span><span style="color:#0000ff;">response </span><span style="color:#971a1a;">=&gt; </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:19.3pt;">console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#aa1111;">'</span><span style="color:#aa1111;">响应拦截器</span><span style="color:#aa1111;">'</span><span style="color:#333333;">, </span><span style="color:#0054aa;">response</span><span style="color:#333333;">)</span></p> 
     <p style="margin-left:19.3pt;"><span style="color:#770087;">return </span><span style="color:#0054aa;">response</span></p> 
     <p style="margin-left:9.65pt;"><span style="color:#333333;">},</span></p> 
     <p><span style="color:#333333;">)</span></p> 
     <p></p> 
     <p style="margin-left:9.6pt;"><span style="color:#0054aa;">$axios</span><span style="color:#333333;">.</span>onError<span style="color:#333333;">( </span><span style="color:#0000ff;">error </span><span style="color:#971a1a;">=&gt; </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:28.9pt;">console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#aa1111;">'error.response.status'</span><span style="color:#333333;">, </span><span style="color:#0054aa;">error</span><span style="color:#333333;">.</span>response<span style="color:#333333;">.</span>status<span style="color:#333333;">)</span></p> 
     <p style="margin-left:9.65pt;"><span style="color:#333333;">}</span></p> 
     <p><span style="color:#333333;">)</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  引入插件

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;">plugins<span style="color:#333333;">: [</span><span style="color:#aa1111;">'~/plugins/interceptor.js'</span><span style="color:#333333;">]</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

##       第六章 插件方式解耦在 NuxtJs 中调用 api ##

###       创建api插件 api/test.js ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">({ </span><span style="color:#0000ff;">$axios </span><span style="color:#333333;">}, </span><span style="color:#0000ff;">inject</span><span style="color:#333333;">) </span><span style="color:#971a1a;">=&gt; </span><span style="color:#333333;">{ </span><span style="color:#0054aa;">inject</span><span style="color:#333333;">(</span><span style="color:#aa1111;">'test'</span><span style="color:#333333;">, </span><span style="color:#0000ff;">data </span><span style="color:#971a1a;">=&gt; </span><span style="color:#0054aa;">$axios</span><span style="color:#333333;">.</span>$get<span style="color:#333333;">( </span><span style="color:#ff5400;">`/test` </span><span style="color:#333333;">) )</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**引入插件**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;">plugins<span style="color:#333333;">: [</span><span style="color:#aa1111;">'~/api/test.js'</span><span style="color:#333333;">]</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**组件中调用**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">async </span>asyncData<span style="color:#333333;">({ </span>app <span style="color:#333333;">}) { </span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#770087;">const </span><span style="color:#0000ff;">response </span><span style="color:#971a1a;">= </span><span style="color:#770087;">await </span>app<span style="color:#333333;">.</span>$test<span style="color:#333333;">() </span>console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span>response<span style="color:#333333;">)</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">},</span></p> 
     <p></p> 
     <p style="margin-left:41.3pt;">methods<span style="color:#333333;">: { </span>testApiPlugin<span style="color:#333333;">() { </span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#770087;">const </span><span style="color:#0000ff;">response </span><span style="color:#971a1a;">= </span><span style="color:#770087;">this</span><span style="color:#333333;">.</span>$test<span style="color:#333333;">()</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**第七章 路由** **Vue-Router**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.45pt;"><span style="color:#333333;">pages</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Nuxt.js  依据 目录结构自动生成  [vue-router ][Vue-Router] 模块的路由配置，不需要我们去额外的配置路由。

1.  Nuxt 根据 pages 下面的 article.vue 和 index.vue 页面组件，生成如下路由配置：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:22pt;">routes<span style="color:#333333;">: [{ </span></p> 
     <p style="margin-left:31.65pt;">path<span style="color:#333333;">: </span><span style="color:#aa1111;">"/article"</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:31.65pt;">component<span style="color:#333333;">: </span><span style="color:#aa1111;">"pages/article.vue"</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">"article"</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}, { </span></p> 
     <p style="margin-left:31.65pt;">path<span style="color:#333333;">: </span><span style="color:#aa1111;">"/"</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:31.65pt;">component<span style="color:#333333;">: </span><span style="color:#aa1111;">"pages/index.vue"</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">"index"</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}],</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  在页面之间使用路由跳转，官方建议使用

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:4.1pt;"><span style="color:#333333;">&lt;router</span><span style="color:#333333;">-</span><span style="color:#333333;">link&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

的作用与 Vue 的

标签。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:2.8pt;"><a href="https://zh.nuxtjs.org/api/components-nuxt-link" title="<nuxt-link>" rel="nofollow">&lt;nuxt-link&gt;</a></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

一致

在 layouts/default.vue 中 将

标签改为

， 指定要跳转的路由地址。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;template&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;div&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">&lt;!-- </span><span style="color:#aa5400;">头部导航 </span><span style="color:#aa5400;">--&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;div </span><span style="color:#0000cc;">class</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"header"</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;ul&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#aa5400;">&lt;!-- &lt;li&gt;&lt;a href=""&gt;</span><span style="color:#aa5400;">首页</span><span style="color:#aa5400;">&lt;/a&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#aa5400;">&lt;li&gt;&lt;a href=""&gt;</span><span style="color:#aa5400;">文章</span><span style="color:#aa5400;">&lt;/a&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#aa5400;">&lt;li&gt;&lt;a href=""&gt;</span><span style="color:#aa5400;">问答</span><span style="color:#aa5400;">&lt;/a&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#aa5400;">&lt;li&gt;&lt;a href=""&gt;</span><span style="color:#aa5400;">个人中心</span><span style="color:#aa5400;">&lt;/a&gt;&lt;/li&gt; --&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"/"</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">首页</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"/article"</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">文章</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">""</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">问答</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">""</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">个人中心</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/ul&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">&lt;!-- </span><span style="color:#aa5400;">主体内容 </span><span style="color:#aa5400;">--&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;nuxt /&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:1.35pt;text-align:center;"><span style="color:#117700;">&lt;/template&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

点击 文章，跳到了 /pages/article.vue 页面

###       基础路由 ###

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.85pt;"><span style="color:#333333;">pages</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    在 下创建 user 目录，user目录下创建 index.vue 和 one.vue 结构如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p>pages<span style="color:#971a1a;">/</span></p> 
     <p><span style="color:#971a1a;">--| </span>user<span style="color:#971a1a;">/</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p><span style="color:#971a1a;">-----| </span>index<span style="color:#333333;">.</span>vue <span style="color:#971a1a;">++++++</span></p> 
     <p><span style="color:#971a1a;">-----| </span>one<span style="color:#333333;">.</span>vue&nbsp;&nbsp;&nbsp; <span style="color:#971a1a;">++++++</span></p> 
     <p><span style="color:#971a1a;">--| </span>article<span style="color:#333333;">.</span>vue</p> 
     <p><span style="color:#971a1a;">--| </span>index<span style="color:#333333;">.</span>vue</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  那么，Nuxt.js 自动生成的路由配置如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:22pt;">router<span style="color:#333333;">: { </span>routes<span style="color:#333333;">: [</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">path<span style="color:#333333;">: </span><span style="color:#aa1111;">'/user'</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:41.3pt;">component<span style="color:#333333;">: </span><span style="color:#aa1111;">'pages/user/index.vue'</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">'user'</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">path<span style="color:#333333;">: </span><span style="color:#aa1111;">'/user/one'</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:41.3pt;">component<span style="color:#333333;">: </span><span style="color:#aa1111;">'pages/user/one.vue'</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">'user-one'</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">path<span style="color:#333333;">: </span><span style="color:#aa1111;">"/article"</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:41.3pt;">component<span style="color:#333333;">: </span><span style="color:#aa1111;">"pages/article.vue"</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">"article"</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">path<span style="color:#333333;">: </span><span style="color:#aa1111;">"/"</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:41.3pt;">component<span style="color:#333333;">: </span><span style="color:#aa1111;">"pages/index.vue"</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">"index"</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">]</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  在 layouts/default.vue 对个人中心添加路由跳转：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="text-align:center;"><span style="color:#117700;">&lt;template&gt;</span></p> 
     <p style="margin-left:0cm;text-align:center;"><span style="color:#117700;">&lt;div&gt;</span></p> 
     <p style="margin-left:19.25pt;"><span style="color:#aa5400;">&lt;!-- </span><span style="color:#aa5400;">头部导航 </span><span style="color:#aa5400;">--&gt;</span></p> 
     <p style="margin-left:19.25pt;"><span style="color:#117700;">&lt;div </span><span style="color:#0000cc;">class</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"header"</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:28.95pt;"><span style="color:#117700;">&lt;ul&gt;</span></p> 
     <p style="margin-left:38.6pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"/"</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">首页</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:38.6pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"/article"</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">文章</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:38.6pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">""</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">问答</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"/user/one"</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">UserOne</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/ul&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">&lt;!-- </span><span style="color:#aa5400;">主体内容 </span><span style="color:#aa5400;">--&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;nuxt /&gt;</span></p> 
     <p style="margin-left:6.15pt;text-align:center;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/template&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  <table> 
     <tbody> 
      <tr> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table>
    
      
    点击个人中心

###       动态路由 ###

在  Nuxt.js  里面定义带参数的动态路由，需要创建对应的**以 下划线作为前缀**的  Vue  文件 或 目录。

####       下划线为前缀的Vue文件 ####

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.95pt;"><strong><span style="color:#333333;">_</span></strong></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    在 pages/user 目录下创建**以**以下目录结构：

**下划线作为前缀** 的  Vue  文件

1.  Nuxt.js 生成对应的路由配置表为：

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.85pt;"><span style="color:#333333;">:id</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    路由地址中 用于匹配请求参数。

在 user/\_id.vue 组件中使用 validate 校验参数值是否合法。

asyncData 通过 \{params\} 获取参数值，不能通过 this.$route.params.id 这种获取方式获取。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;template&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;div&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;h1&gt;</span></p> 
     <p style="margin-left:70.25pt;"><span style="color:#333333;">获取到的用户</span><span style="color:#333333;">id</span><span style="color:#333333;">是：</span><span style="color:#333333;">{ { $route.params.id }}</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;/h1&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/template&gt;</span></p> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;script&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:22pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">校验参数值</span></p> 
     <p style="margin-left:22pt;">validate <span style="color:#333333;">({ </span><span style="color:#0000ff;">params </span><span style="color:#333333;">}) { </span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">必须是</span><span style="color:#aa5400;">number</span><span style="color:#aa5400;">类型</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">return </span><span style="color:#ff5400;">/^\d+$/</span><span style="color:#333333;">.</span>test<span style="color:#333333;">(</span><span style="color:#0054aa;">params</span><span style="color:#333333;">.</span>id<span style="color:#333333;">)</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:22pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">查询数据</span></p> 
     <p style="margin-left:22pt;">asyncData<span style="color:#333333;">( { </span><span style="color:#0000ff;">params </span><span style="color:#333333;">} ) { </span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// this.$route.params.id </span><span style="color:#aa5400;">这种获取方式是错的</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">const </span><span style="color:#0000ff;">id </span><span style="color:#971a1a;">= </span><span style="color:#0054aa;">params</span><span style="color:#333333;">.</span>id</p> 
     <p style="margin-left:31.65pt;">console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#ff5400;">`</span><span style="color:#ff5400;">查询</span><span style="color:#ff5400;">id=${ </span><span style="color:#0054aa;">id</span><span style="color:#ff5400;">}</span><span style="color:#ff5400;">的用户数据</span><span style="color:#ff5400;">`</span><span style="color:#333333;">)</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/script&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  <table> 
     <tbody> 
      <tr> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table>
    
      
    测试，请求 http://localhost:8000/user/2

1.  发送一个参数是字母的请求 http://localhost:8000/user/aa ，user/\_id.vue 组件不匹配，nuxt.js 就会去找

user/aa.vue  组件，但是当前没有，就会抛出异常。

####       下划线为前缀的目录 ####

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.8pt;"><strong><span style="color:#333333;">_</span></strong></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    在 pages 目录下创建 **以**

view.vue

以下目录结构：

**下划线作为前缀**的问答模块目录

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.95pt;"><span style="color:#333333;">_question</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

，并创建两个文件  index.vue  和

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;">pages<span style="color:#971a1a;">/</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#971a1a;">--| </span>_question<span style="color:#971a1a;">/ </span><span style="color:#ff0000;"># </span><span style="color:#ff0000;">问答模块，热门</span><span style="color:#ff0000;">hot</span><span style="color:#ff0000;">，最新</span><span style="color:#ff0000;">new</span><span style="color:#ff0000;">，待回答</span><span style="color:#ff0000;">wait</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#971a1a;">-----| </span>index<span style="color:#333333;">.</span>vue <span style="color:#ff0000;"># </span><span style="color:#ff0000;">问答列表，根据不同类型问题，显示不同列表</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#971a1a;">-----| </span>view<span style="color:#333333;">.</span>vue <span style="color:#ff0000;"># </span><span style="color:#ff0000;">问题详情</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#971a1a;">--| </span>user<span style="color:#971a1a;">/</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#971a1a;">-----| </span>_id<span style="color:#333333;">.</span>vue</p> 
     <p style="margin-left:12.35pt;"><span style="color:#971a1a;">-----| </span>index<span style="color:#333333;">.</span>vue</p> 
     <p style="margin-left:12.35pt;"><span style="color:#971a1a;">-----| </span>one<span style="color:#333333;">.</span>vue</p> 
     <p style="margin-left:12.35pt;"><span style="color:#971a1a;">--| </span>article<span style="color:#333333;">.</span>vue</p> 
     <p style="margin-left:12.35pt;"><span style="color:#971a1a;">--| </span>index<span style="color:#333333;">.</span>vue</p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  Nuxt.js 生成对应的路由配置表为：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:10.95pt;text-align:center;">router<span style="color:#333333;">: { </span></p> 
     <p style="margin-left:31.65pt;">routes<span style="color:#333333;">: [</span></p> 
     <p></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// http://localhost:8000/hot</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">path<span style="color:#333333;">: </span><span style="color:#aa1111;">"/:question"</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:41.3pt;">component<span style="color:#333333;">: </span><span style="color:#aa1111;">"pages/_question/index.vue"</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">"question"</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">},</span></p> 
     <p></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// http://localhost:8000/hot/view</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">path<span style="color:#333333;">: </span><span style="color:#aa1111;">"/:question/view"</span><span style="color:#333333;">, </span>component<span style="color:#333333;">: </span><span style="color:#aa1111;">"pages/_question/view.vue"</span><span style="color:#333333;">,</span></p> 
     <p></p> 
     <p style="margin-left:41.3pt;">name<span style="color:#333333;">: </span><span style="color:#aa1111;">"question-view"</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.85pt;"><span style="color:#333333;">:question</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    路由地址中 用于匹配请求参数。

在 pages/\_question/index.vue 组件中使用 validate 校验参数值是否合法。

asyncData 通过 \{params\} 获取参数值，不能通过 this.$route.params.id 这种获取方式获取。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;template&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;div&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;h1&gt;</span><span style="color:#333333;">问答列表页面</span><span style="color:#333333;">—— { { $route.params.question }}</span><span style="color:#117700;">&lt;/h1&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/template&gt;</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;script&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span>validate<span style="color:#333333;">({ </span><span style="color:#0000ff;">params</span><span style="color:#333333;">}) { </span></p> 
     <p style="margin-left:50.95pt;">console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#aa1111;">'</span><span style="color:#aa1111;">接收的参数值为</span><span style="color:#aa1111;">'</span><span style="color:#333333;">, </span><span style="color:#0054aa;">params</span><span style="color:#333333;">.</span>question<span style="color:#333333;">)</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#770087;">const </span><span style="color:#0000ff;">arr </span><span style="color:#971a1a;">= </span><span style="color:#333333;">[</span><span style="color:#aa1111;">'hot'</span><span style="color:#333333;">, </span><span style="color:#aa1111;">'wait'</span><span style="color:#333333;">, </span><span style="color:#aa1111;">'red'</span><span style="color:#333333;">]</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">必须是为数组中的某一个元素</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#770087;">return </span><span style="color:#0054aa;">arr</span><span style="color:#333333;">.</span>indexOf<span style="color:#333333;">(</span><span style="color:#0054aa;">params</span><span style="color:#333333;">.</span>question<span style="color:#333333;">) </span><span style="color:#971a1a;">!= -</span><span style="color:#116644;">1</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#333333;">},</span></p> 
     <p style="margin-left:31.65pt;">asyncData<span style="color:#333333;">({ </span><span style="color:#0000ff;">params</span><span style="color:#333333;">}) { </span></p> 
     <p style="margin-left:50.95pt;">console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#aa1111;">'</span><span style="color:#aa1111;">查询问题列表</span><span style="color:#aa1111;">'</span><span style="color:#333333;">, </span><span style="color:#0054aa;">params</span><span style="color:#333333;">.</span>question<span style="color:#333333;">)</span></p> 
     <p style="margin-left:0cm;text-align:center;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/script&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  修改 layouts/default.vue 默认布局文件中的回答路由地址

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;template&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;div&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">&lt;!-- </span><span style="color:#aa5400;">头部导航 </span><span style="color:#aa5400;">--&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;div </span><span style="color:#0000cc;">class</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"header"</span><span style="color:#117700;">&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;ul&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"/"</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">首页</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"/article"</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">文章</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"/hot"</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">问答</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"/user"</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">个人中心</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#117700;">&lt;li&gt;&lt;nuxt-link </span><span style="color:#0000cc;">to</span><span style="color:#333333;">=</span><span style="color:#aa1111;">"/user/one"</span><span style="color:#117700;">&gt;</span><span style="color:#333333;">UserOne</span><span style="color:#117700;">&lt;/nuxt-link&gt;&lt;/li&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/ul&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">&lt;!-- </span><span style="color:#aa5400;">主体内容 </span><span style="color:#aa5400;">--&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#117700;">&lt;nuxt /&gt;</span></p> 
     <p style="margin-left:10.95pt;text-align:center;"><span style="color:#117700;">&lt;/div&gt;</span></p> 
     <p style="margin-left:1.35pt;text-align:center;"><span style="color:#117700;">&lt;/template&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

1.  <table> 
     <tbody> 
      <tr> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table>
    
      
    请求 http://localhost:8000/hot

针对 也是一样的，请求 http://localhost:8000/hot/view

###  ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#777777;">path: "/:question/view"</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

嵌套路由

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.45pt;"><span style="color:#333333;">.vue</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.7pt;"><span style="color:#333333;">&lt;nuxt</span><span style="color:#333333;">-</span><span style="color:#333333;">child/&gt;</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个**与该文件同名**的目录用来存放子视图组件。

1.  在父组件(

文件) 内增加

用于显示子视图内容。

比如：

针对首页 pages/index.vue 添加子路由，则文件结构如下：

Nuxt.js 自动生成的路由配置如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:1.3pt;text-align:center;">router<span style="color:#333333;">: { </span></p> 
     <p style="margin-left:31.65pt;">routes<span style="color:#333333;">: [</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// http://localhost:8000/</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:41.3pt;">path<span style="color:#333333;">: </span><span style="color:#aa1111;">"/"</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:41.3pt;">component<span style="color:#333333;">: </span><span style="color:#aa1111;">'pages/index.vue'</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">"index"</span><span style="color:#333333;">,</span></p> 
     <p style="margin-left:41.3pt;">children<span style="color:#333333;">: [{ </span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#aa5400;">// ?</span><span style="color:#aa5400;">表示可传可不传，如果一定要，则</span><span style="color:#aa5400;">index</span><span style="color:#aa5400;">目录下创建一个 </span><span style="color:#aa5400;">index.html</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#aa5400;">// http://localhost:8000/1</span> path<span style="color:#333333;">: </span><span style="color:#aa1111;">":id?"</span><span style="color:#333333;">, </span>component<span style="color:#333333;">:</span><span style="color:#aa1111;">"pages/index/_id.vue"</span><span style="color:#333333;">, </span>name<span style="color:#333333;">: </span><span style="color:#aa1111;">"index-id"</span></p> 
     <p style="margin-left:41.3pt;"><span style="color:#333333;">}]</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">}</span></p> 
     <p></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">]</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

##       第八章 中间件 ##

###       什么是中间件 ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#333333;">middleware/</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.35pt;"><span style="color:#333333;">middleware/auth.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。可用于权限判断，有权限才可访问  对应页面。

每一个中间件应放置在中间件)。

目录。文件名的名称将成为中间件名称 (

将成为

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#333333;">nuxt.config.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 、  layouts  或者  pages  中使用中间件。

###       创建权限中间件 ###

1. 创建 nuxt-demo2\\middleware\\auth.js ，其中文件名 auth 就是中间件名称 。一个中间件接收 [context ][Link 6]作为第一个参数。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">({ </span><span style="color:#0000ff;">store</span><span style="color:#333333;">, </span><span style="color:#0000ff;">redirect </span><span style="color:#333333;">}) </span><span style="color:#971a1a;">=&gt; </span><span style="color:#333333;">{ </span></p> 
     <p style="margin-left:31.65pt;">console<span style="color:#333333;">.</span>log<span style="color:#333333;">(</span><span style="color:#aa1111;">'auth.js</span><span style="color:#aa1111;">认证中间件被执行</span><span style="color:#aa1111;">'</span><span style="color:#333333;">)</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#aa5400;">// </span><span style="color:#aa5400;">有</span><span style="color:#aa5400;">store</span><span style="color:#aa5400;">实例，且有</span><span style="color:#aa5400;">userInfo</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#770087;">if</span><span style="color:#333333;">(</span><span style="color:#971a1a;">!</span><span style="color:#0054aa;">store </span><span style="color:#971a1a;">|| !</span><span style="color:#0054aa;">store</span><span style="color:#333333;">.</span>state<span style="color:#333333;">.</span>userInfo<span style="color:#333333;">) { </span><span style="color:#770087;">return </span><span style="color:#0054aa;">redirect</span><span style="color:#333333;">(</span><span style="color:#aa1111;">"/"</span><span style="color:#333333;">)</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

###       使用中间件 ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.85pt;"><span style="color:#333333;">nuxt.config.js</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在 、  layouts  或者  pages  中使用中间件。

1.  在 nuxt-demo2\\pages\\user\\index.vue 页面组件中使用中间件，

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;script&gt;</span></p> 
     <p style="margin-left:50.95pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span>middleware<span style="color:#333333;">: </span><span style="color:#aa1111;">'auth'</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/script&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

浏览器访问 http://localhost:3000/user ，重写向到首页 http://localhost:3000/

1.  在 nuxt-demo2\\layouts\\default.vue 默认布局中使用中间件

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;script&gt;</span></p> 
     <p style="margin-left:31.65pt;"><span style="color:#770087;">export default </span><span style="color:#333333;">{ </span>middleware<span style="color:#333333;">: </span><span style="color:#aa1111;">'auth'</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#117700;">&lt;/script&gt;</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

只要引用了这个布局的页面组件，当浏览器访问时都先执行中间件。

1.  <table> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         <p style="margin-left:3.85pt;"><span style="color:#333333;">nuxt.config.js</span></p> 
        </div> </td> 
      </tr> 
     </tbody> 
    </table>
    
    在 中使用中间件

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p></p> 
     <p style="margin-left:22pt;">module<span style="color:#333333;">.</span>exports <span style="color:#971a1a;">= </span><span style="color:#333333;">{ </span>router<span style="color:#333333;">: { </span></p> 
     <p style="margin-left:31.65pt;">middleware<span style="color:#333333;">: </span><span style="color:#aa1111;">'auth'</span></p> 
     <p style="margin-left:22pt;"><span style="color:#333333;">}</span></p> 
     <p style="margin-left:12.35pt;"><span style="color:#333333;">}</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

中间件在每个路由改变时被调用 。

###       Nuxt 生命周期流程图分析 ###

下图是  Nuxt.js  应用一个完整的服务器请求到渲染（或用户通过  <nuxt \- link>  切换路由渲染页面）的流程：

分析上面 Nuxt 流程图：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.7pt;"><span style="color:#333333;">Store</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.8pt;"><span style="color:#333333;">action</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

当一个客户端请求进入的时候，服务端有通过 nuxtServerInit 这个命令执行在 的 ，在这里

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <p style="margin-left:3.55pt;"><span style="color:#333333;">Store</span></p> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

接收到客户端请求的时候，可以将一些客户端信息存储到 Store 中，也就是说可以把在服务端存储的一些客

户端登录信息存储到 中。

接着使用了 中间件 机制，中间件其实就是一个函数，会在每个路由执行之前去执行，在这里可以做很多事情，或者说可以理解为是路由器的拦截器的作用。

再接着使用 validate 对客户端携带的参数进行校验。

然后在 asyncData 与 fetch 进入正式的渲染周期， asyncData 向服务端获取数据，把请求到的数据合并到中的 data 中。

最后 Render 将渲染组件。

[https_zh.nuxtjs.org]: https://zh.nuxtjs.org/
[Link 1]: https://baike.baidu.com/item/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/104812
[Link 2]: https://baike.baidu.com/item/%E7%BD%91%E7%AB%99/155722
[Link 3]: https://baike.baidu.com/item/%E8%87%AA%E7%84%B6%E6%8E%92%E5%90%8D/2092669
[Link 4]: https://baike.baidu.com/item/%E5%93%81%E7%89%8C/235720
[Vue 2]: https://github.com/vuejs/vue
[Vue-Router]: https://github.com/vuejs/vue-router
[Vuex]: https://github.com/vuejs/vuex
[Vuex _]: https://zh.nuxtjs.org/guide/vuex-store
[Vue _]: https://ssr.vuejs.org/en/
[Vue-Meta]: https://github.com/nuxt/vue-meta
[Webpack]: https://github.com/webpack/webpack
[vue-loader]: https://github.com/vuejs/vue-loader
[babel-loader]: https://github.com/babel/babel-loader
[Node.js]: https://nodejs.org/zh-cn/
[Visual Studio Code - Code Editing. Redefined]: https://code.visualstudio.com/
[https_zh.nuxtjs.org_api_con_guration-server]: https://zh.nuxtjs.org/api/configuration-server
[Vuex _ 1]: http://vuex.vuejs.org/
[Nuxt - The context]: https://zh.nuxtjs.org/api/context
[Link 5]: https://vue-meta.nuxtjs.org/api/#tagidkeyname
[Link 6]: https://zh.nuxtjs.org/api#%E4%B8%8A%E4%B8%8B%E6%96%87%E5%AF%B9%E8%B1%A1
[Introduction - Axios Module]: https://axios.nuxtjs.org/
[http_mock.mengxuegu.com]: http://mock.mengxuegu.com/
[async _ await]: https://github.com/lukehoban/ecmascript-asyncawait
[Link 7]: https://zeit.co/blog/async-and-await