Vue-router 学习笔记

lxf2024-04-07 01:51:29

    数据获取(以下为 文档示例 )

  有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现:

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

  导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。

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

  导航完成后获取数据

      当你使用这种方式时,我们会马上导航和渲染组件,然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态,还可以在不同视图间展示不同的 loading 状态。

  假设我们有一个 Post 组件,需要基于 $route.params.id 获取文章数据: