Vue中的路由：分页获取数据以及路由更新

katherine的小世界
7,361 阅读4分钟

最近一直在忙着做项目，也渐渐开始有些疲倦了，感觉如果一直做一些重复的事情，还真的是很容易厌倦的，所以也是时候停下来，总结一下自己这段时间遇到的一些小问题以及一些小感悟吧。项目中用到的是vue，但其实说实话，对于其背后的核心以及真正的理念，自己还不是很清楚，就先通过做项目，了解一些基本的信息吧，再去慢慢体会，欢迎一起来交流呀。

接下来就算是总结一下自己这段时间遇到的一些问题吧，同时补充一些基础知识点。

--------------------------------------------- 我是华丽的分割线 -------------------------------------------------------

  • 路由基础知识
$router: router实例，可以实现编程式导航，导航到不同的url。
 基本的几种跳转方法：
 router.push(location):用户点击返回会回到之前的url
 router.replace(location): 不会向history中添加新的记录，会替换当前的history记录
 router.go(n): 类似window.history.go 会记录向前或者向后多少步
 
  // 字符串
 router.push('home')

 // 对象
 router.push({ path: 'home' })

 // 命名的路由
 router.push({ name: 'user', params: { userId: 123 }})

 // 带查询参数，变成 /register?plan=private
 router.push({ path: 'register', query: { plan: 'private' }})

 // 带命名参数，变成导航到 /user/123 路径
 router.push({ name: 'user', params: { userId: 123 }}) 

$route: 当前激活的路由对象，这个属性是只读的，可以通过watch来检测它。    
 当前的路由信息对象，有很多属性
 $route.path: 当前路由的路径，'/foo/bar'
 $route.params： 当前路由的参数，可以根据该参数进行不同用户的id的获取
 $route.query： 当前路由的URL的请求参数，对于 /foo?user=1，则有         $route.query.user == 1
 $route.hash： 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
 $route.name： 当前路由的名字。
上面是vue中路由的一些基本的信息

实际项目中的应用与例子：

vue 实现分页显示和数据请求，路由更新。

在项目中需要实现表格的一个分页显示，那向后台获取数据的时候也需要带上页码的数据参数，当然，为了请求参数之后，路由的数据也跟着跳转改变，除此之外，直接在地址栏输入地址，也可以直接根据请求参数，向后台获取相应页面的数据。那么我是在项目中做了这样的操作。

1 绑定页面切换事件，获取当前页码，更改当前的路由地址。
2 监听路由变化，根据路由变化，获取参数，向后台请求某页的数据。
3 目的，路由变化，数据请求变化。页面切换，路由变化，数据也跟着变化。

当获取的是表格中第一页的数据，路由地址是：http://localhost:8998/#/cashierPage?page=1
当获取的是表格中第二页的数据，路由地址是：http://localhost:8998/#/cashierPage?page=2

因为现在是前后端分离，所以只能前端来手动修改路由地址。

先看具体的实现吧，项目中是用了element组件的page控件。
首先，element中的分页组件的引用，具体使用可以先看一下官方文档：
element.eleme.io/#/zh-CN/com…

template中的模块
<el-pagination
             @current-change="handleCurrentChange"
             :current-page="page.cur"
             :page-size="10"
             layout="total, prev, pager, next"
             :total="20 * page.totalPage">
</el-pagination>
其中，根据官网来，current-change是当前显示的页面，
而@current-change事件是在current-page改变的时候会请求。

所以在main.js中，handleCurrentChange的处理就是
handleCurrentChange (val) {
       this.$route.query.page = val  // 其中val是当前的页数。
       this.$router.replace(route)  // 这样页面就跳转到相应的路由了。
       此时的路由地址是： 
  }

当然，仅仅这样改变路由还是不够的，还需要根据此时的路由的参数page参数，去向后台请求数据。我的做法就是监听路由变化。

watch: {
      // 监听路由变化，随时获取新的列表信息
      '$route': 'fetchData'
    }

那么如何获取数据就根据你后台的接口地址来获取了

// 获取路由信息，得到当前的页数。
fetchData () {
       this.loading = true
       this.page.cur = +this.$route.query.page || 1   // 这个就是当前要请求的页数
       this.getList()  // 向后台发数据请求的接口，我分来来写了。
     }
// 这个就根据后台接口自己去写请求方法了。
getList () {
       api.getBookList({
         page: this.page.cur,
         reservationname: this.guestName,
         reservationphone: this.phoneNum
       })
         .then((data) => {
           this.loading = false
           // 转化数据
           this.resolveData(data.data.orders)
           // 赋值总页数
           this.page.totalPage = data.data.count
         })
         .catch((err) => {
           console.log(err)
         })
     }

当点击第一个之后。路由跟着变化，点击第一页的时候，路由是

image.png
image.png

而此时的实现是：


image.png
image.png

2 数据获取

router.vuejs.org/zh-cn/advan…
在路由跳转的时候，相应的页面也会跟着渲染，那么，官方文档提出了两种解决的方法。

导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

导航完成之前获取：导航完成前，在路由的 enter 钩子中获取数据，在数据获取成功后执行导航。

从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。

而我更倾向于导航完成后去请求数据，这样会比较方便简单吧。 页面第一次初始化的时候，就去请求数据。

 created () {
   // 组件创建完后获取数据，
   // 此时 data 已经被 observed 了
   this.fetchData()
 },
 watch: {
   // 如果路由有变化，会再次执行该方法
   '$route': 'fetchData'   // 只有这个页面初始化之后，这个监听事件才开始生效
 },

总结：

根据当前的路由参数，去向后台发起相关的数据请求；自己在实际项目中还有一个应用就是，需要向后台请求不同的报表数据，这些报表的名字都不一样，所以点击按钮之后，就设置当前的路由参数，再根据当前的路由参数去获取相关的数据，进行页面的渲染。

avatar
文章
阅读
粉丝