48-VUE-5

• 添加路由标签<router-view>到App.vue的div里面，这里就是4个路由page

• 把FooterGuide的组件import到App.vue里面，然后映射成标签

• 给footer写h5+css，这里注意，使用@import可以引入common下面的静态资源，这里引入的是一个 mixins.styl，然后就可以用里面的东西了

• footer导航栏是写的，在这里就把下面四个button的样式给写了，然后没有写点击事件

• 四个button区分点击状态的是：guide_item_on和guide_item，1:3，之前看的传统的就是把绿色的图标样式的class设为guide_item_on，白色的没有点击的默认为guide_item

• 在这里是用了动态的，就是根据router地址，来设置该class是否on，实现逻辑有很多，这里只是按路由地址，也可以搞监听点击事件直接修改class，但是后续肯定就是点击改路由地址了-->：class=“ {on：‘/msite’=== $route.path } ”

• 给那四个button加监听@click，每一个都加一个goTo方法，跳转路由地址，goTo( path ){ this.$router.reaplace( path ) }

• 开始写每一个组件

• msite：①添加静态资源文件，copyh5代码，引入mixins.styl加stylus代码，静态组件就搞好了

• 同样剩下的3个，全部添加图片，和各自的样式，到时候再把头部的header搞成复用的就行了

• 很明显，这里的公共的header，应该写成一个vue，然后公共的title，不写成死的，在这里采取的方式，居然是把只有首页的header两边有的部分，写成2个slot占位；再把之前的head的样式，也放到这个vue里面来；再在export default { props { title：String }}把入参写好 

• 引入header.vue，这里路由组件自然也是可以引入非路由的vue的

• 对于msite，只传title并不够，还要把之前header的vue里面的两个slot给插了，在header.vue生成的标签里面写好插槽的部分，然后添加属性slot=“left”就可以成功占位；把四个路由组件照这样全部写完

• 下载swiper的轮播第三方插件

• 引入Swiper，关于第三方的引用，在哪个vue使用，就在哪个vue的js里面引用,在这里不仅仅要引用swiper的js，还要引入swiper的css

• 这里引用了swiper，在这里，遵循的规则，import的js的顺序是：main.js-->index.js

• swiper的使用：在mouted(){}里面new一个swiper，这里要传参数：new Swiper（'.swiper-container'，{配置信息}），这里的配置信息有：loop：true//循环轮播； pagination：{ el：‘.swiper- pagination’，}//分页器

• 给shoplist部分搞一个一般组件：新建一个shoplist的文件夹，里面new一个vue，然后把该模块的图片放进来

• 在第四个组件内点击跳到一个登陆界面，这里注意，这个page是属于一级路由，完全脱离了第四个路由，所以要新建一个路由组件，第五个：login.vue

• 在第四个路由组件里面把原先的a标签替换成<router-link>，然后在这里写to=“路径”相当于$router.push，在这里一般写router-link，这样安卓手机点击返回，是有history的，$route是当前的，$router是全局的。。。

• 需求：隐藏footerNavigation，在这里在路由的全局配置里面，给各个路由加配合：meta{ showFooter：true }，通过读这些路由的属性，来判断是否隐藏footerNavigation

• postman，这个软件可以模拟各种请求-->前端测后台接口

• 封装ajax请求函数-->在api文件夹下面，写两个js，一个是ajax.js，一个是接口：index.js

• ajax.js，封装ajax的func， export default function ajax（url，data={ }，type='GET'）然后在这个function里面写代码

• primise对象，这里就是类似java里面的interface一样可以当做一个异步回调

• 这里就是封装一个请求参数，然后后面直接调用就行了

• 成功和失败的promise的demo，在这里是return new Promise（function（resolve，reject）{ //在这里就要把这个请求的异步返回结果，分别写出来， }）,虽然不知道具体的语法，但是还是很容易看得懂，在这里，还是把axios封装的代码贴一下

export default function ajax(url，data={}，type='GET'){
    return new Promise（function（resolve，reject）{
        let promise
        if（type === 'GET'）{
            let dataStr = ''
            Object.keys（data）.forEach（key => {
                dataStr += key + '=' + data[key] + '&'
    }）
        if（dataStr !== ''）{
        dataStr = dataStr.subString(0,dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
        }
                promise =axios.get(url)
    }else{
        promise = axios.post(url,data)
    }
    promise.then(function (response){
    resolve(response.data)
    })catch( function(error){
    reject(error)
        })
    }）
}