axios

<div>
      <router-link to="/index">主页</router-link>
      <router-link to="/first">子页</router-link>
      <router-view></router-view>
</div>
<script src:'vue.js链接'></script>
<script src:'vue.router链接'></script>
<script src:'axios.js链接'></script>

      var Index={
            template:`
                  <h1>这是主页</h1>
            `
      };
      var First={
            template:`
                  <div>
                         <h2>这是分页</h2>
                         <table border=1 cellspacing=0>
                               <thead>
                                    <tr>
                                          <th>编号</th>
                                          <th>品名</th>
                                          <th>单价</th>
                                          <th>数量</th>
                                          <th>小计</th>
                                    </tr>
                               </thead>
                               <tbody>
                                     <tr v-for="value in list">
                                           <td>{{value.num}}</td>
                                           <td>{{value.pname}}</td>
                                           <td>{{value.price}}</td>
                                           <td>{{value.count}}</td>
                                           <td>{{value.sub}}</td>
                                     </tr>
                               </tbody>
                         </table>
                  </div>
            `,
            data:function(){
                  return{
                        list:null
                  }
            },
            mounted:function(){
                  var self=this;
                  axios({     （此处是发送请求）
                        method:"get",
                        url:"fruit.json"   (此处引号中的内容在文章最后一块代码区)
                  }).then(function(resp){    （请求成功）
                        console.log(resp.data);
                        self.list=resp.data;
                  }).catch(function(err){     （请求失败）
                        console.log(err)
                  })
            }
      };
      const routes=[      
            {path:'/',component:Index},
            {path:'/index',component:Index},
            {path:'/first',component:First}
      ];
      const router=new VueRouter({
            routes:routes,
            linkActiveClass:'active'
      });
      new Vue({
            el:'.nr',
            router:router
      })
</script>

[
      {
            "num":1,            (num,pname等属性，以及冒号后的字符串必须用双引号括住)
            "pname":"apple",
            "price":3,
            "count":2,
            "sub":6
      },
      {
            "num":2,
            "pname":"pear",
            "price":4,
            "count":3,
            "sub":12
      },
      {
            "num":3,
            "pname":"banana",
            "price":5,
            "count":4,
            "sub":20
      }
]