nuxt学习笔记

1.什么是nuxt？

nuxt.js是基于Vue.js的应用框架，一个用于Vue.js开发SSR应用的一站式解决方案。它的优点是将原本需要几个配置文件完成的内容，都整合到了一个nuxt.config.js中，封装和扩展都变得简便起来。

2.nuxt适合做什么样的项目？

1. 需要SEO的项目 ，搜索引擎的优先爬取级别是页面的HTML结构，当我们使用SSR时，服务端已经生成了与业务相关联的HTML，这样的信息对SEO是很友好的；
2. 需要服务器渲染的项目 ；
3. 工期着急的项目 ，因为nuxt很多配置都集成好了，不需要我们再去配置，比如 自动导入路由、组件等等；

3.什么是SSR呢？有什么优点？

SSR是服务端渲染，客户端向服务器发送http请求，服务器接受请求后，将HTML文件响应给浏览器，浏览器将收到的HTML页面展示。也就是说HTML页面是在服务器端生成的，而浏览器只需要进行渲染，这样大大减少了加载时间，提升了加载效率。
由服务器组装好DOM元素，生成HTML字符串给浏览器，也就是在浏览器里还是可以看到整个页面的DOM源码。搜索引擎的优先爬取级别是页面的HTML结构，当我们使用SSR的时候，服务端已经生成了与业务相关的HTML，这样的信息对于SEO很友好。
优点：浏览器不需要进行数据处理，所以浏览器端速度快，效率高
缺点：服务端要进行数据输出和生成HTML页面的工作，服务端压力大。
CSR客户端渲染：服务端只响应数据，不生成HTML页面。浏览器发送请求，获取数据，得到响应后渲染成页面。客户端从上到下依次解析，如果解析的过程中发现了新的ajax请求，那就再发送新的请求，等拿到ajax响应结果以后再渲染模板引擎。
缺点：与服务端渲染相比内容加载速度比较慢，首屏渲染时间长，不利于SEO。

4.nuxt项目的目录介绍

assets————资源文件
components————组件
layouts————布局，默认default。所有页面都会在加载在布局页面中的标签中。如果要在普通页面中使用下级路由，则要在页面中添加
middleware————中间件：每个页面加载前调用，在页面中调用的方法是middleware：‘middlewareName’。
node_modules————依赖包
nuxt.config.js————个性化配置
pages————页面。根页面是index.vue，二级页面只要添加文件夹，动态路由页面的名称格式是：
_变量.vue
plugins————插件
static————静态文件（不需要webpack打包的）。
store————状态管理

5.nuxt的路由配置和参数传递

nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。

1.基本路由

Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置。
假设pages的目录结构如下
———pages
——————index.vue
——————user
—————————index.vue
—————————one.vue
那么，nuxt.js自动生成的路由配置如下：

router:{
	routes:[
	 {
		name:'index',
		path:'/',
		component:'pages/index.vue'
	 },
	 {
		name:'user',
		path:'/user',
		component:'pages/user/index.vue'
	 },
	 {
	 	name:'user-one',
	 	path:'/user/one',
	 	component:'pages/user/one.vue'
	 }
  ]
}

2.页面跳转

1.不要写成a标签，因为是重新获取一个新的页面，并不是SPA

2.<nuxt-link to='/users'

3.this.$router.push(‘/users’)

3.动态路由

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

4.跳转路由传递参数并且取值

路由经常需要传递参数，我们可以简单的使用params来进行传递参数，我们现在向新闻页面（news）传递个参数，然后在新闻页面进行简单的接收。
（1）使用nuxt传递参数

<li><nuxt-link :to="{name:'news',params:{newsId:3306}}"></li>
//注意，name其实指向的是路由（文件夹或文件名），而路由死活区分大小写，所以to后面区分大小写，建议文件夹都写成小写的。

（2）使用this.$router.push的params传递参数

传递参数 --this.$router.push({path:'路由’，query:{key:value}})

参数取值 --this.$route.query.key

注意：使用这种方式，传递参数会拼接在路由后面，出现在地址栏

（3）使用this.$router.push的params传递参数

传递参数 --this.$router.push({name:‘路由的name’，params:{key:value}})

参数取值 --this.$route.params.key

注意：使用这种方式，参数不会拼接到路由后面，地址栏上看不到参数。由于动态路由也是传递params的，所以在this.$router.push()方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。

5.项目需求url优化

this.$route.query.key的方式参数显示在地址栏上，但是并不是我们想要的，：id？id=’‘？，所以建议还是尽量使用router-link来实现跳转解决地址栏的变化，更方便网站的优化。

6.Nuxt的错误页面和个性meta设置

当用户输入路由错误的时候，我们需要给他一个明确的指引，所以需要添加一个必不可少的404页面。Nuxt.js支持直接在默认布局文件夹里建立错误页面。

1.建立错误页面

在根目录下的layouts文件夹下建立一个error.vue文件，它相当于一个显示应用错误的组件。

2.个性meta设置

页面的Meta对于SEO的设置非常重要。比如如果要做一个新闻页面，那为了搜索引擎对新闻的收录，需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。我们现在要把New-1这个页面设置成个性的meta和title
1.我们先把pages/news/index.vue页面的链接进行修改一下，传入一个title，目的是为了在新闻具体页面进行接收title，形成文章的标题。
/pages/news/index.vue

<li><nuxt-link :to="{name:'news-id',params:{id:123,title:'nuxt.com'}}">News-1</nuxt-link></li>

2.第一步完成后，我们修改/pages/news/_id.vue，让它根据传递值变成独特的meta和title标签。

//获取title值
data(){
	return{
		title：this.$route.params.title
	}
}

7.asyncData方法获取数据

1.asyncData异步请求数据

Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了asyncData，异步请求数据。

asyncData(){
	return axios.get('https://api.mjson.com/bins/1ctwlm').then(res=>{
	console.log(res)
	return {info:res.data}
	})
  }
}

这时候我们可以看到，浏览器中已经能输出结果了。asyncData的方法会把值返回到data中。是组件创建（页面渲染）之前的动作，所以不能使用this.info。
注意：一定要return出去获得到的对象，这样就可以在组件中使用，这里返回的数据会和组件中的data合并。这个函数不光会在服务端执行，在客户端也同样会执行。

2.asyncData注意事项

1.asyncData方法会在组件（限于页面组件）每次加载之前被调用
2.asyncData可以在服务端或路由更新之前被调用
3.第一个参数被设定为当前页面的上下文对象
4.Nuxt会将asyncData返回的数据融合到组件的data方法，返回的数据一并返回给组件使用
5.对于asyncData方式是在组件初始化之前被调用的，所以在方法内没办法通过this来引用组件的实例对象。

目前主要学习了这些。