<div class="box">
        <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>
        var Home = {
            template:`
                <h1>这是首页</h1>
            `
        }
        
        var Detail = {
            template:`
                <div>
                    <h1>这是详情页</h1>
                    <table>
                        <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.uname}}</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 thiss = this//这里用了vue的生命周期为了下面可以应用this所以需要声明一个代替this
            axios({
                method:'get',//请求方式
                url:'fruit.json',//axios数据的位置
                
            }).then(function(tru){//请求成功
               
                thiss.list = tru.data
                console.log(thiss.list);
            }).catch(function(flash){//请求失败
                
            })
        }
    }
    
    const routes = [
        {path:"/",component:Home},
        {path:"/home",component:Home},
        {path:"/detail",component:Detail}
    ]
    
    const router = new VueRouter({
        routes:routes
    })
    new Vue({
        el:'.box',
        router:router
    })
</script>

fruit.json
[
    {
        "num":1,
        "uname":"apple",
        "price":3,
        "count":4,
        "sub":12
    },
    {
        "num":2,
        "uname":"banana",
        "price":4,
        "count":5,
        "sub":20
    },
    {
        "num":3,
        "uname":"pear",
        "price":6,
        "count":5,
        "sub":30
    }
]