Nuxt.js服务端渲染

Nuxt.js服务端渲染
什么是Nuxt.js
Vue服务端渲染官网
Nuxt.js官网

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

Nuxt初体验

文件结构分析

页面和路由

1. 基本路由
   Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
   假设 pages 的目录结构如下

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

2. 页面跳转
1> 跳转user页面
nuxt-link与router-link的作用一样,都能用来做路由跳转
2> this.$router.push(name{:}^{\prime }use{r}^{\prime })//nuxt的name指的是pages下面的文件夹名称this.$router.push({path: ‘/user’}) // 原方法
注意: 跳转 使用a标签也可以到user页面,但是相当于重新刷新页面

3. 动态路由
   在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
   在详情页,获取动态参数{{$route.params.id}}

4.路由参数校验
Nuxt.js可以让你在动态路由对应的页面组件中配置一个validate方法用于校验路由参数的有效性.
该参数有一个布尔类型的返回值,如果返回true则表示验证通过,如果返回false则表示校验位通过.

5. 嵌套路由
1> 新建一个VUE文件,作为父组件
2> 添加一个与父组件同名的文件夹来存放子视图组件
3> 在父文件中,添加组件,用于展示匹配到的子视图
// 用于存放嵌套的子组件

创建layouts
在layouts文件夹下新建一个layout组件,例如teacher.vue,并在这个组件中添加,这样所有的和teacher相关的页面都会有公共的layout
给需要用到teacher.vue的组件添加layout属性,并指定需要使用的layout,例如: layout: “teacher”
创建特殊layout: 在layouts文件夹下面新建error.vue,error是关键字 当找不到页面就会显示error.vue内容
layout中也能使用组件: 在components文件夹下面新建一个Header.vue组件
引入组件，注意路径的~符号，表示根目录
异步数据
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。所以需要注意这个函数中不能使用this

注意：常规写法如果在created钩子中写异步，是在客户端渲染的而不是在服务端

使用方法：asyncData(context, callback) {callback(null, data)}

context.route.params.xxx获取参数

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

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

样式配置
nuxt.config.js中设置设置全局样式文件路径