新闻页面

1.router.js路由改造

点击新闻资讯时，将匹配对应的路由，将app组件中的router-view 渲染为对应的新闻组件

//导入路由插件
import VueRouter from 'vue-router'
import news from "./components/news.vue"
const router=new VueRouter({
    routes:[
{path:'/home/news',component:news}
    ]
})

2.新闻组件

2.1 使用MUI中的组件

    <ul class="mui-table-view">
                    <li class="mui-table-view-cell mui-media" v-for="data in datalist">
                        <a href="javascript:;" class="">
                            <img class="mui-media-object mui-pull-left" :src="data.icon">
                            <div class="mui-media-body">
                                {{data.title}}
                                <p class="mui-ellipsis">{{data.content}}</p>
                            </div>
                        </a>
                    </li>
    </ul>

2.2 Vue通过vue-resource异步加载数据

import { Toast } from 'mint-ui';
    export default {
        data() {
            return {
                datalist: [],
                totast:""
            }
        },
        methods: {
            getList() {
                this.$http.get("http://www.zpliublog.club:8080/API").then(reponse=>{
                    this.totast.close()
                    this.datalist=reponse.body
                },error=>{
                    this.totast.close()
                    Toast({
                      message: '服务器开小差啦！',
                      position: 'middle',
                      duration: 4000
                    });
                })
            }
        },
        created:function(){
            this.totast=Toast({
                message: '正在请求数据',
                position: 'middle',
                duration: -1
            })
            this.getList()
        }
    }