vue 配合 vant组件开发 路由懒加载 切换路由回到页面顶部

成果展示，上拉下拉皆可刷新请求数据，可通过点击首页，我的可切换路由

 

 引入vant组件库

npm i vant -S

引入main.js引入tabbar

import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);

复制代码进入app.vue并修改样式 ，并在van-tabber中输入route开启路由模式

创建一个API文档，封装axios

// 文章相关的API都封装在这个模块当中
// 导入requert
import request from '@/utils/request.js'
// 向外按需导出一个API函数
export const getArtAPI = function(_page, _limit){
  return request.get('/articles', {
    // 把需要的对象通过params发送
    // get模式需要传递参数就加params
    params: {
      _page,
      _limit
    }
  })
}

在home导入封装的接口，并引用vant组件中的下拉刷新组件

import { getArtAPI } from "@/API/artAPI.js";

在methods中请求接口， 在created函数里进行调用

  methods: {
    async initArticleList(isRefresh) {
      const { data: res } = await getArtAPI(this.page, this.limit);
      // 如果是上拉加载更多，那么就是旧数据前，新数据后
      if (isRefresh) {
        // 证明是下拉刷新，新数据在前，旧数据在后
          this.artlist = [...res, ...this.artlist];
      //   // 当请求的数据等于0的时候，就不在请求
           this.isLoading= false;
      } else {
        // 证明是上拉加载更多，旧数据在前，新数据在后
          this.artlist = [...this.artlist, ...res];
      //   // 当请求的数据等于0的时候，就不在请求
           this.loading = false;
      }



   

      if (res.length === 0) {
        this.finished = true;
      }
    },
    // 只要是onload被屌用，就应该请求下一页数据
    onLoad() {
      console.log("触发了load事件");
      // 让页码值加一
      this.page++;
      // 重新请求接口获取数据
      this.initArticleList();
    },
    onRefresh(){
      console.log('应该刷新了');
      // 1让页码值+1
      this.page++
      // 再次请求数据
       this.initArticleList(true);

    }
  },


  created() {
    this.initArticleList();
  },

便可以实现下拉刷新效果

路由的懒加载

界面不会一次性全部加载，而是当你切换到路由的时候，他才会进行加载。

切换路由时自动滚动到顶部 

代码示例

iot官网部分路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/team',
    name: 'Team',
    component: () => import('../views/Team.vue')
  },
  {
    path: '/userdetail/:id',
    name: 'Userdetail',
    component: () => import('../components/userdetail.vue'), props: true
  },
  {
    path: '/trend',
    name: 'Trend',
    component: () => import('../views/Trend.vue')
  },
  {
    path: '/comment',
    name: 'Comment',
    component: () => import('../views/Comments.vue')
  },
  {
    path: '/join',
    name: 'Join',
    component: () => import('../views/Join.vue')
  },

]

const router = new VueRouter({
  routes,
  // 路由滚动到顶部
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

export default router