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