vue 动态标签_vue服务端渲染框架nuxt使用经验分享

最近在学习使用nuxtjs框架，自己个人博客的前端部分就是使用nuxt框架搭建的。

为什么选择nuxt框架？

nuxt框架

因为考虑到seo(搜索引擎优化)，国内多数搜索引擎蜘蛛是无法爬取到ajax获取的内容的。

现在流行的SPA单页面应用都是采用前后端分离的形式开发，基本采用ajax请求的方式去做数据交互，对seo很不友好。

因此需要seo的项目，要使用ssr(服务端渲染)，即在后端渲染数据，多年前jsp,php等语言所写的页面就是服务端渲染，前后端杂糅在一起写，或者使用模板引擎。

• nuxt的使用场景：

1. 项目中有seo的需求，但是不想采用传统的ssr方案，而是采用现代前后端分离的方式开发。
2. 简化vue开发，不需要配置太多的webpack，脚手架大部分已经帮我们做好了。

接下来就说一下nuxt中的重点：

1、路由

在nuxt中，不需要自己写router.js文件，有种约定大于配置的思想，直接在pages文件夹中创建文件夹和vue文件，即可生成对应的router。(编译之后在.nuxt文件夹中可以看到)

比如pages/admin/user/index.vue，在浏览器地址栏可以通过localhost:端口/admin/user访问。

2、动态路由

动态路由的文件需要命名为_+参数名的形式，如pages/article/_id.vue，访问方式为localhost/article/123，此时与vue一样，在程序中使用params即可获取id的值为123。

3、asyncData方法

asyncData方法与data()和生命周期方法同级，此方法在vue实例创建之前执行(因此不能通过this获取vue实例)，用来渲染页面上需要seo的数据。方法入参有个context对象，具体看下面例子：

async asyncData({ $axios,params }){   let id = params.id   let user = await ($.axios.$get("http://localhost/api/getUserById"+id)).data   return {      user //这里返回的user就是相当于在data方法里返回的，可以通过this.user访问   }}

4、nuxt-link标签与a标签

本人一开始使用nuxt-link去实现页面跳转，结果发现页面跳转非常慢，后来了解到nuxt-link是局部重新渲染，需要等asyncData方法获取数据完毕之后才会跳转页面。

因此需要使用a标签去跳转。

那为什么要有nuxt-link标签呢，因为如果项目不是ssr模式，那么为了用户体验，需要局部渲染，就要使用这个标签。

5、created生命周期函数里不能使用window对象

在created函数里面，不能使用window对象，比如sessionStorage，在asyncData同样不能！

以上就是nuxt学习的关键点，如有错误，请各位指正！

关注我，一起巧学前端！