用vue开发微信公众号H5移动端页面

第一步：搭建项目结构

其中涉及到路由的配置：

    我是这样的
     routes: [
        {
          path: '/',
            name: 'base-home',
            redirect: '/main',
            component: '',
            children: [
              {
                path: '/main',
                name: 'home',
                component: '',
                meta: {
                  keepInner: false, // 相对于router-view里边跳转缓存
                  keepAlive: true
                }
              }
          ]
        }
    
    我在入口文件app.vue中使用了router-view,并根据v-if来判断meta中keepALive的值决定是否缓存。

第二步：写静态页面，封装组件，数据交互。--推荐使用vue官网的代码风格

问题来了：

  我在app.vue是使用了router-view进行切换路由，但是我第一级路由存在子路由，此时又需要router-view进行切换，我根据meta中的keepInner进来判断是否要缓存。
  
  现在开始axios进行数据交互。
  
  目前我在a页面，调用了mounted中的方法（比如获取数据），之后我去到同级的b页面的子页面c中触发mounted的方法。此时，神奇的东西来了。

1、子页面c竟然调用了之前a页面中mounted中的方法？怎么办？

    出现这个问题我的解决方法目前是最好不要在两层router-view中都使用缓存。

2、想要缓存又想要某个页面进来重新获取数据？？

你可以使用beforeRouterEnter中进行判断from.path，注意：这里只能通过next(vm=>{})中的vm来代替this，这步还没有加载完Dom。

3、需要实现滚动到底部自动加载下一页的数据，如何实现？(试过使用better-scroll插件，出现有些卡顿，并且在ios中页面有点奇怪，本来浏览页面点击头部自动会回去顶部，使用了之后没用了)

思路：先加载第一页数据，通过可是clientHeight窗口高度，和（document.body.scrollTop）当前盒子滚动的高度，以及当前页面的全部高度进行判断。

页面需要监听scroll滚动事件，
   一、通过window.addEventListener('scroll', this.scrollFun)，使用这个方法需要注意，bestoryed的钩子函数中要window.removeEventListener('scroll',this.scrollFun)。倘若你该页面使用了缓存，则需要在beforeRouterLeave的路由钩子中移除监听事件。
   
   二、通过页面盒子进行绑定scroll事件，需要设置该盒子的css样式为{
       position: absolute;
       width: 100%;
       height: 100%;
       overflow-y: auto;
   }否则，监听不了scroll滚动事件。
   

滚动到相应位置，加载下一页数据，使用concat合并数据。在页面使用v-for遍历数据。

‘如果你在v-for中使用了key属性，并且是：key="Math.random()"’，每次遍历key都不一样的，会出现一个问题，当你加载下一页数据进行concat合并时，上一页的数据会重新加载。因为key代表唯一性，所以每次都必须重新获取。