Vue Router 数据获取策略深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00562/article/details/148375011

Vue Router 数据获取策略深度解析

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router

前言

在现代单页应用(SPA)开发中，数据获取是核心功能之一。Vue Router 作为 Vue.js 官方的路由管理器，提供了灵活的数据获取机制。本文将深入探讨 Vue Router 中两种主要的数据获取策略，帮助开发者根据实际场景选择最佳方案。

两种数据获取策略对比

Vue Router 主要支持两种数据获取方式：

导航后获取数据：先完成路由跳转，再在目标组件中获取数据
导航前获取数据：在路由守卫中获取数据，确认数据就绪后再完成导航

导航后获取数据

适用场景

对首屏加载速度要求较高的应用
数据获取不是关键路径的场景
需要显示加载状态的页面

实现方式

export default {
  data() {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created() {
    this.fetchData()
  },
  watch: {
    '$route': 'fetchData'
  },
  methods: {
    fetchData() {
      this.error = this.post = null
      this.loading = true
      getPost(this.$route.params.id)
        .then(post => {
          this.post = post
        })
        .catch(err => {
          this.error = err.toString()
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}

优点

实现简单直观
可以立即显示页面框架，提升用户体验
便于展示加载状态

缺点

可能需要处理空数据状态
页面跳转后可能需要重新布局

导航前获取数据

适用场景

数据是页面渲染的必要条件
需要确保数据可用性的关键页面
需要避免页面内容闪烁的场景

实现方式

export default {
  data() {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter(to, from, next) {
    getPost(to.params.id)
      .then(post => {
        next(vm => vm.setData(null, post))
      })
      .catch(err => {
        next(vm => vm.setData(err, null))
      })
  },
  beforeRouteUpdate(to, from, next) {
    this.post = null
    getPost(to.params.id)
      .then(post => {
        this.setData(null, post)
        next()
      })
      .catch(err => {
        this.setData(err, null)
        next()
      })
  },
  methods: {
    setData(err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}