axios

下载：npm install axios
vue中的axios 前端页面和后台数据进行交互
服务器下载：npm install http-server -g
安装：http-server
链接：先vue后vue-router最后axios

<div id='app'>
     <router-link to="/home">首页</router-link>
    <router-link to="/det">详情页</router-link>
    <router-view></router-view>
</div>
<script>
  var Home={
        template:`
            <h1>这是首页</h1>
        `
    }
    var Det={
        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="val in fuss">
                        <td>{{val.bian}}</td>
                        <td>{{val.pin}}</td>
                        <td>{{val.dan}}</td>
                        <td>{{val.shu}}</td>
                        <td>{{val.xiao}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        `,
        data:function(){
            return{
                fuss:null
            }
        },
        mounted:function(){
            var self=this;
            axios({
                method:'get',//发送数据的方式
                url:'fu.json'
            }).then(function(resp){//请求成功
//                console.log(resp.data)
                self.fuss=resp.data
            }).catch(function(err){//请求失败

            })
        }
    }
    const a=[
        {path:'/home',component:Home},
        {path:'/det',component:Det}
    ]
    const b=new VueRouter({
        routes:a
    })
    new Vue({
        el:'#app',
        router:b
    })
</script>

fu.json

[
    {
        "bian":1,
        "pin":"banana",
        "dan":2,
        "shu":3,
        "xiao":6
    },
    {
        "bian":2,
        "pin":"pear",
        "dan":3,
        "shu":4,
        "xiao":12
    },
    {
        "bian":3,
        "pin":"pear",
        "dan":4,
        "shu":5,
        "xiao":20
    }
]