2018-09-25axo

<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
}
]