<div id="app">
    <!--1-->
    <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:`
        <div>
            <h1>This is home</h1>
        </div>
        `
    };
    var Detail = {
        template:`
        <div>
            <h1>这是详情页内容</h1>
            <table border=1 cellspacing=0>
                <thead>
                    <tr>
                        <td>编号</td>
                        <td>品名</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>小计</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="value in fruitlist">
                        <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{
                fruitlist:null
            }
        },
        mounted:function(){
            var god = this;
            axios({
                method:"get",//发送数据的方式
                url:"list.json"
            }).then(function(resp){//请求成功
                console.log(resp.data);
                god.fruitlist = 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
    new Vue({
        el:"#app",
        router:router
    });
</script>