1. 犀牛前端部落首页
  2. 资讯杂谈

nuxt使用简易教程

为什么选择nuxt框架?因为考虑到seo(搜索引擎优化),国内多数搜索引擎蜘蛛是无法爬取到ajax获取的内容的,现在流行的SPA单页面应用都是采用前后端分离的形式开发,基本采用ajax请求的方式去做数据交互,对seo很不友好,所以要使用ssr(服务端渲染),即在后端渲染数据,多年前jsp,php等语言所写的页面就是服务端渲染,前后端杂糅在一起写,或者使用模板引擎。

nuxt的使用场景:

  • 1、项目中有seo的需求,但是不想采用传统的ssr方案,而是采用现代前后端分离的方式开发。
  • 2、简化vue开发

接下来就说一下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同样不能!

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4371.html

发表评论

登录后才能评论