导航  导航
每日一言

能被js重写的终将会被js重写。

vue 标签下的全部文章(1)

记录学习使用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开发学习中的主要经验,后续还会继续补充。