Nuxt.js

Nuxt.js 開發筆記 - Middleware

Middleware 會在一個頁面或一群頁面render之前執行的程式。

例如驗證使用者權限之類的功能,就會以middleware的方式來處理。

middleware會接收到一個context的變數作為第一個參數,關於context 裡面有key,可參考這裡

middleware被執行的順序如下:

  1. nuxt.config.js
  2. 符合的 layout
  3. 符合的 page

 

以下是參考範例
先在middleware裡面建立要執行的程式,檔名會自動可成為被呼叫的名稱

middleware/stats.js

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

nuxt.config.js

Nuxt.js 開發筆記 - 路由 Routing

說明文件:https://nuxtjs.org/guide/routing

基本概念:只要在 pages 目錄及子目錄中,建立相關的index.vue檔,就會自動生成對應的route

例如

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

就可以產生  三個 route,分別是  "/" ,  "/user",  "/user/one"

 

動態路由

要建立動態路由也滿簡單的,就是在vue檔,加上 下底線 "_" 的前綴 ,如

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

以上範例中,有三個動態路由,分別是  "/{slug}/" , "/{slug}/comments" 與 "users/{id}"