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

書籍目錄

快速登入

計數器