XOOPS輕鬆架 - 線上書籍

:::

Vue.js 3.0 筆記
=============

1. 先安裝一個外部套件 
  ```javascript
  npm install @nuxtjs/axios
  ```
2. 將外部套件加入設定檔nuxt.config.js 
  ```javascript
  modules: ['@nuxtjs/axios'],
  ```
3. 然就可以直接用外部套件了。 
  ```javascript
  async asyncData({$hello, $axios}) {
    $hello('我在後端被asyncData了')
    const res =await $axios.get('http://blog.lces.tn.edu.tw/api.php?op=index')
    return {res: res.data.data}
  },
  ```
4. 若是axios無法取得資料，可以用 try{}.catch(){} 方式來呈現錯誤，但一旦用到axios的地方很多，這樣會顯得麻煩，所以，可以做一個 plugin來處理。
5. 先建立 <span class="filename" data-v-3df07819="">plugins/axios.js</span> 
  ```javascript
  export default function ({ $axios, redirect }) {
    $axios.onError(error => {
      if (error.response.status === 500) {
        console.log('500');
        redirect('/500')
      }
  
      if(error.response.status === 404) {
        console.log('404');
        redirect('/404')
      }
    })
  }
  
  ```
  
   <span class="filename" data-v-3df07819=""></span>
6. 加入設定檔nuxt.config.js 
  ```javascript
  plugins: ["~/plugins/hello.js", "~/plugins/axios.js"],
  ```
7. 如此當api傳回404或500時就會自動導向到 page/404.vue或500.vue（要自己做） 
  ```javascript
  <script>
  export default {
  };
  </script>
  
  <template>
    <h1>404 咩有～</h1>
  </template>
  
  <style lang="scss" scoped>
  </style>
  
  ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1881

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器