第一步:搭建项目结构

其中涉及到路由的配置:

    我是这样的
     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代表唯一性,所以每次都必须重新获取。
复制代码
Logo

前往低代码交流专区

更多推荐