导航  导航

记录学习使用vue ssr框架nuxt的关键点

作者: 挺帅
发表于:
更新于:

最近在学习使用nuxtjs框架,此博客系统的前端部分就是使用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同样不能!


以上就是本人在nuxt开发学习中的主要经验,后续还会继续补充。

如果觉得文章还不错,或者对你有帮助的话,那就点个赞呗! 点赞11
向右滑动

全部评论(3)

ghost:

ghost win  reply

 ghost:

卧槽  

 拉拉:

我的天  

 拽拽:

😄  

 咧咧:

biu  

昵称:
回复TA:
林俊杰:

阔以的  reply

 周杰伦:

yigiaowoligiaogiao  

  :

<pre>&emsp;&nbsp;能不能让我输一些空格啊</pre>  

 卡卡:

不行  

昵称:
回复TA:
周杰伦:

哎哟不错哦  reply

  我就想输入左边空格右边文字 :

1 空格都不让我输 换行对齐怎么办  

 jj:

我的地盘我做主  

昵称:
回复TA: