「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」。

在上上一篇文章Vue Router的使用（一）和上一篇文章Vue Router的使用（二）中介绍了vue-router的一些基本用法，比如，动态路由，路由跳转，路由替换，历史路由跳转，重定向，别名等，这篇文章中我们继续看一下更深的用法吧~

路由懒加载

vue项目在打包构建应用时，JavaScript 包非常大，很影响页面加载。提供了一种懒加载机制。把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件，大大的提高了效率。这个在我们开发项目中经常需要这样设置。

举个栗子：

const StudentDetails = () => import('./views/StudentDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/Student/:id', component: StudentDetails }],
})

component 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。

组件按组分块

当我们想把某个路由下的所有组件都打包在同一个异步块 (chunk) 中。只需要使用命名 chunk一个特殊的注释语法来提供 chunk name：

const StudentDetails = () =>
  import(/* webpackChunkName: "group-student" */ './StudentrDetails.vue')
const StudentDashboard = () =>
  import(/* webpackChunkName: "group-student" */ './StudentDashboard.vue')
const StudentProfileEdit = () =>
  import(/* webpackChunkName: "group-student" */ './StudentProfileEdit.vue')

滚动

当我们切换路由时，想要页面滚到顶部，或者是保持原先的位置，就像重新加载页面那样。vue-router可以自定义路由切换时页面如何滚动。

注: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建 Router 实例的时候，提供一个 scrollBehavior 方法：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior 函数接收 to和 from 路由对象，第三个参数 savedPosition，只有当这是一个 popstate 导航时才可用（由浏览器的后退/前进按钮触发）。

这个函数可以返回了一个 ScrollToOptions位置对象:

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { top: 0 }
  },
})

过渡动效

vuerouter还提供了过度的效果，如果想要在你的路径组件上使用转场特效，让导航有动画效果的时候，就可以使用 v-slot 这个API。

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

单个路由过渡

每个路由的组件也可以设置不同的过渡效果，把元信息和动态的 name 结合在一起，设置在<transition> 上：

const routes = [
  {
    path: '/custom-transition',
    component: PanelLeft,
    meta: { transition: 'slide-left' },
  },
  {
    path: '/other-transition',
    component: PanelRight,
    meta: { transition: 'slide-right' },
  },
]

<router-view v-slot="{ Component, route }">
  <!-- 使用任何自定义过渡和回退到 `fade` -->
  <transition :name="route.meta.transition || 'fade'">
    <component :is="Component" />
  </transition>
</router-view>

基于路由的动态过渡

也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡

<!-- 使用动态过渡名称 -->
<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition">
    <component :is="Component" />
  </transition>
</router-view>

以上就是vue-router的路由懒加载，路由分组，路由动效的用法了，谢谢观看！