vue 請求加載本地 json 檔案

初始 分幾步走：

第一步：

   安裝axios 插件并在main.js 中應用 使用

npm install axios --save
           

main.js:: 

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
           

第二步：

  将你需要請求的json 檔案 放入static 目錄下：

 第三步：

 請求：

this.axios.get('http://localhost:8080/static/menu.json')
      .then(res=>{
       console.log(res.data);
       this.theData=res.data;
      })
           

其中 theData 定義的資料類型為 數值

我的json 檔案 ：

[
    {
      "id": "1",
      "name": "基礎管理",
      "menuCode": "10",
      "children": [
        {
          "id": "10",
          "name": "使用者管理",
          "menuCode": "11"
        },
        {
          "id": "11",
          "name": "角色管理",
          "menuCode": "12",
          "children": [
            {
              "id": "110",
              "name": "管理者",
              "menuCode": "121",
              "children":[
                {
                 "id": "1210",
              "name": "管理11111",
              "menuCode": "1210"
              }
              ]
            },
            {
              "id": "111",
              "name": "CEO",
              "menuCode": "122"
            },
            {
              "id": "112",
              "name": "CFO",
              "menuCode": "123"
            },
            {
              "id": "113",
              "name": "COO",
              "menuCode": "124"
            },
            {
              "id": "114",
              "name": "普通人",
              "menuCode": "124"
            }
          ]
        },
        {
          "id": "12",
          "name": "權限管理",
          "menuCode": "13"
        }
      ]
    },
    {
      "id": "2",
      "name": "商品管理",
      "menuCode": "20"
    },
    {
      "id": "3",
      "name": "訂單管理",
      "menuCode": "30",
      "children": [
        {
          "id": "30",
          "name": "訂單清單1",
          "menuCode": "31"
        },
        {
          "id": "31",
          "name": "退貨清單1",
          "menuCode": "32",
          "children": []
        }
      ]
    },
    {
      "id": "4",
      "name": "商家管理",
      "menuCode": "40",
      "children": []
    }
  ]