1.服务器端渲染时。第一次请求页面的时候，由服务器帮忙发送请求拼接好数据，并将拼接好的页面数据返回交给前端渲染。

2.当下次客户端要去跳转页面的时候，此时页面结构页面中的数据全部交给客户端渲染

npm i create-nuxt-app -g

create-nuxt-app my-nuxt-demo //my-nuxt-demo 是名字，选择的时候第一个确定，第二个额选择none，第三个选择none，第四个选择选un，第五个看情况选择，第六个yes，第七个none，第八个确定，第九个npm

cd my-nuxt-demo

npm run dev

路由跳转

第一种方式：

给相应的标签绑定@click=’jumpTo’

然后在函数方法中//

this.$router.push('/相应的路径')

第二种，如果使用组件跳转用nuxt-link组件，它和router-link作用一样，必须要有to属性

v-for="(item,index) in teachers"

:key="index"

>

{{ item.name }}

路由参数

在详情页文件夹中创建一个文件夹叫_id文件夹，把详情页写在里面。

然后在需要点击跳转的页面里加``好跟相应的id

参数校验

校验路由参数，通过validte方法去校验，这个方法不能写到methods中，有一个必须返回的返回值，该值为布尔类型。如果为true就表示校验通过，如果为false就表示校验不通过, 那么就会报页面没有找到

validate(obj) {

// 参数里面可以获取到路由参数

return /^\d+$/.test(obj.params.id)

}

嵌套路由

添加一个Vue文件，作为父文件

添加一个与父文件同名的文件文件夹来存放子视图组件

在父文件中，添加组件，用于展示匹配到的子视图

components

在components文件夹下面新建一个Header.vue组件

引入组件，注意路径的~符号，表示根目录

import .......

components：{}

挖坑

创建layout

去layouts文件夹下面新建一个新的layout组件，例如teachers.vue，并在这个组件中添加组件，这样，所有和teachers相关的页面都会有公共的layout

给需要用到teachers.vue的组件添加layout属性，并指定需要使用的layout，例如：layout: 'teachers'在js中

1.3.2 创建特殊layout : error

layouts文件夹下面新建error.vue，error是关键字

1.3.4 样式配置

nuxt.config.js中设置设置全局样式文件路径，例如

css: [

'~/assets/styles/index.css'

],

ElementUI使用

下载npm i element-ui -S

在plugins文件夹下面，创建ElementUI.js文件

import Vue from 'vue'

import ElementUI from 'element-ui'

Vue.use(ElementUI)

3.在nuxt.config.js中添加配置

css: [

'element-ui/lib/theme-chalk/index.css'

],

plugins: [

{src: '~/plugins/ElementUI', ssr: true }

],

build: {

vendor: ['element-ui']

}

异步数据

如果在created钩子中写异步，是在客户端渲染的而不是在服务端

asyncData(context, callback) {callback(null, data)}

这个函数中不能使用this

context.route.params.xxx获取参数

callback(new Error(), data)渲染出错的页面

这个方法在服务器端执行和在客户端执行的区别

axios的使用

安装

npm install --save axios

使用

import axios from 'axios'

asyncData(context, callback) {

axios.get('http://localhost:3301/in_theaters')

.then(res => {

console.log(res);

callback(null, {list: res.data})

})

}

为防止重复打包，在nuxt.config.js中配置

module.exports = {

build: {

vendor: ['axios']

}

}