Nuxt.js学习笔记 --后端和axios

上篇文章我们简单学习了SSR和基础的Nuxt.js语法，以及一些关于Nuxt.js的路由知识，东西不多，确实让我们感受到了Nuxt.js的方便配置。也不知道为什么，虽然我个人很喜欢一些小而美的框架，比如Flask, Koa, Gin之类的，但是对于Vue和Koa基础上得以封装的Nuxt.js也感觉到不错的样子。

路由和切换效果

Nuxt.js的路由封装的办法挺有意思的，上文我们讲过一些简单的路由，那么如果类似于下面的封装结构：

我们的配置应该是这样的：

//about.vue
<h1>this is the about page</h1>
  <nuxt-link :to="{name:'index'}">Back</nuxt-link>

//index.vue
<div class="links">
  <nuxt-link :to="{name:'about'}">about</nuxt-link>
  <nuxt-link :to="{name:'about-error'}">error</nuxt-link>
</div>

 这就类似于vue-router中的：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'about',
      path: '/about',
      component: 'pages/about/index.vue'
    },
    {
      name: 'about-error',
      path: '/about/error',
      component: 'pages/about/error.vue'
    }
  ]
}

关于切换效果，Nuxt.js提供了一种渐变消退的切换方式：

// asset/main.css
.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-active {
  opacity: 0;
}

// nuxt.config.js
css: [
    'element-ui/lib/theme-chalk/index.css',
    'assets/main.css' //新添加
  ],

如上配置可以得到一种渐变的路由切换效果。

异步获取数据

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

上面是官网对于Nuxt.js异步数据的一些介绍，如果你也看过我关于Koa学习笔记中Promise,await,async等的描述，你或许对上面的一段话有些模糊的理解，我个人还是喜欢一些新的东西，因此我会尝试使用async和await。

后端Demo

对于服务器端，我们简单的写一个demo，其实大致和纯koa语法的使用差不多，首先因为Nuxt.js默认并不会安装koa-router,因此我们还要先安装一下，可能是集成版本Koa有点低的缘故，这里我们会看到一些警告，目前使用起来是没有什么错误的，如果以后出错的话我们再解决。

const Router = require('koa-router')

 在"nuxt.option.server"的后面我们可以配置路由：

  const api_router = new Router({
    prefix: '/api'
  })

  api_router.get('/', async ctx=>{
    ctx.body = {
      status:'200',
      msg:[
        。。。
      ]
    }
  })

  app.use(api_router.routes())
  app.use(api_router.allowedMethods())

这里照常把所有数据放在前缀为prefix的索引下。这时我们直接访问"http://localhost:3000/api"就可以找到我们写好的数据。

这时官方推荐的几个获取axios数据的方法我都试了一下，然而一直在报错，这个以后再度讨论吧：

inject is not a function

_nuxt_axios__WEBPACK_IMPORTED_MODULE_0__.default.get is not a function