前言

这段时间一直做得项目是电商的项目，因为一开始用的vue-cli全家桶写的项目，这样是不符合seo搜索引擎优化的，所以就研究了一下ssr，决定用nuxt这个框架开发电商，以满足搜索引擎的条件，接下来就说说我踩过得坑以及解决方案。

注：一定要多看文档

一， 在正式开始介绍之前先说一下搜索引擎优化的关键点

1,最早之前我一直以为搜索引擎优化只是简单地处理几个meta文件，随着知识的深入，了解的更多，然后把搜索引擎优化的我总结的知识点列出来。

最开始的我了解的seo，详情请移步前端小白浅谈seo优化以及web性能优化方案

好好研究谷歌的搜索引擎机制之后并且在电商项目中用到被收录之后的总结的关于seo的知识。详情请移步
关于seo的补充以及给如何做

二， 开始介绍我的踩坑之旅。

- 1，nuxt 采用路由方式(this.$router.push)跳转时,asyncData不是从服务端渲染，asyncData只有页面刷新时才会从服务端渲染

刚开始我也是以为asyncData都是从服务端渲染，然后打开控制台看每次跳转进来都会在客户端调取接口，所以才发现这个问题，后来发现直接用a标签跳转就没问题，所以解决方案就是直接使用a标签跳转

解决方案就是使用a标签跳转，正好也符合seo的标准，爬虫是通过抓取页面的a标签来进行抓取的。

- 2，nuxt中的生命周期

• a, nuxt.js的生命周期beforeCreated,created是在服务端进行的，在这两个生命周期内是拿不到this关键字的，
• b， 在服务端请求数据是在async asyncData中进行的，这个周期内return回来的数据会渲染在vue的data中，所以在methods中可以使用this拿到 async asyncData`中return的变量。

• c ,接下来看一下官网介绍的生命周期

  
  nuxt.png

- 3，nuxt中的生命周期