axios:

vue ajax     前端页面和后台数据进行交互   json
vue 库
下载：
   npm install axios

#访问页面：
   网址：127.0.0.1:8080
   
   
#安装http-server:   
npm install http-server -g 

···
<div id="app">

<router-link to='/home'>首页</router-link>
<router-link to='/detail'>详情页</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/axios.js"></script>
<script>
//2.创建组件
var Home={
template:<h1>这是首页内容</h1>
}

    var Detail={
        template:`
              <div>
                 <h1>这是详情页内容</h1>
              <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 fruList">
                       <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{
               fruList:null 
            }
        },
        
        mounted:function(){
            var self=this;
            axios({
               method:'get',//发送数据的方式
               url:'fruit.json' //路径
                // 请求成功、失败必须有参数  resp err 参数可以不固定写 
            }).then(function(resp){ //请求成功
            
                self.fruList=resp.data
            }).catch(function(err){ //请求失败
                
            })
        }
    }
    //3.配置路由
    const routes=[
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {path:'/detail',component:Detail}
    ]
    //4.创建一个路由实例
    const router=new VueRouter({
        routes:routes
    })
    //5.把路由挂在到vue实例上
    new Vue({
        el:'#app',
        router:router
    })
</script>

···