2018-8-30-router的自我反思与总结三

一、main.js代码

//引入一堆
import Vue from 'vue';
//主体
import App from './components/app.vue';

//引入
import VueResource from 'vue-resource';
//安装插件，插件都是挂载属性
Vue.use(VueResource);
//未来通过this.$http
//  Vue是 所有实例对象的构造函数
//  Vue.protptype.$http ->   实例(this)就可以.$http

//new Vue 启动
new Vue({
    el: '#app',
    render: c => c(App),
})

二、app.vue 代码

<template>
    <div>
        {{data}}
    </div>
</template>
<script>
    export default {
        data(){
            return {
                data:[]
            }
        },created(){
            // console.log(this.$http);
            // this.$http.get('http://182.254.146.100:8899/api/getlunbo')
            // .then(res=>{
            //     this.data = res.body.message;
            // },err=>{
            //     console.log(err)
            // })
            
            //post请求
            this.$http.post('http://182.254.146.100:8899/api/postcomment/300',{
                content:'传智27期，霸气的一批'
            },{
                emulateJSON:true
            })
            .then(res=>{
                this.data = res.body.message;
            },err=>{
                console.log(err);
            })
        }
    }
</script>
<style scoped>
    .h{
        height: 100px;
        background-color: yellowgreen;
    }
    .b{
        height: 100px;
        background-color: skyblue;
    }
    .f{
        height: 100px;
        background-color: hotpink;
    }
</style>

*****************************************

一、引入 main.js

//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';

//主体
import App from './components/app.vue';
//路由切换页面
import header from './components/header.vue'
import footer from './components/footer.vue'
import Music from './components/music.vue'
import Oumei from './components/oumei.vue'
import Guochan from './components/guochan.vue'

//注册全局组件
Vue.component('headerVue', header);
Vue.component('footerVue', footer);

//安装插件
Vue.use(VueRouter); //挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
    //routes
    routes: [{
            path: '/',
            redirect: { name: 'music' },
        },
        {
            name: 'music',
            path: '/music',
            component: Music,
            children: [

                //-> 这里很灵活，如果你写上/xxx  就是绝对路径， /oumei
                //如果你不写/  ,那么就是相对路径 /music/oumei
                { name: 'music_oumei', path: 'oumei', component: Oumei },
                //标识一下，当前路由之间的关系，格式不是必须的
                { name: 'music_guochan', path: 'guochan', component: Guochan }
            ]
        }

    ]
});

//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router, //可以简写router
    render: c => c(App),
})