vue-router知识点整理

Vue-router4版本的知识点整理，包括：入门、导航方式、命名路由与命名、视图重定向与别名、路由组件传参、模式。

VueRouter

• 基础部分
  • 入门
    • 全局组件
      • router-link
      • router-view
    • 路由分类
      • 静态路由：/something
      • 动态路由：/user/:id
    • 路由传参
      • query（查询字符串），记录在地址栏中
      • params（动态路由），不展示在地址栏，记录在内存中
      • 都挂载在route实例上，可以通过useRoute获取route实例
  • 导航方式
    • 声明式导航
      • <router-link>组件
        • to
        • replace
    • 编程式导航
      • 提供router实例
        • go
        • push
        • pop
        • replace
  • 命名路由与命名视图
    • 命名路由
      • 提供name属性为路由创建名称，便于导航
    • 命名视图
      • 提供name属性，比如布局使用
  • 重定向与别名
    • 重定向
      • 支持路径
      • 支持重定向到命名路由
      • 支持方法返回动态重定向目标
    • 别名（alias）
  • 路由组件传参
    • 将路由props携带到组件中
      • 布尔模式：route.params将会被设置成组件的props
      • 对象模式：该对象被当成props传递到组件。（静态对象时易用）
      • 函数模式：可以创建一个返回 props 的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合等等。
  • 模式
    • hash模式
    • history模式(HTML5模式)
• 进阶部分
  • 导航守卫
    • 全局守卫
      • 全局前置守卫(router.beforeEach(to, from, next))
        • to
        • from
        • next
      • 全局解析守卫（router.beforeResolve(to, from)）
        • router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。
        • to
        • from
      • 全局后置守卫
    • 路由独享守卫
    • 组件内守卫
  • 路由元信息
    • 任意附加到路由上的信息，如过渡名称、谁可以访问路由等，这些可以通过接收属性对象的meta属性来实现。
  • 数据获取
    • 导航完成后数据获取
    • 导航完成前数据获取
  • 组合式API
    • useRouter
    • useRoute
    • useLink
  • 过渡动效
  • 滚动行为
  • 路由懒加载
    • () => import()
  • 扩展router-link组件
    • 底层调用router.push()
  • 导航故障
    • 判断是否发生导航故障
      • isNavigationFailure
    • 导航故障类型
      • NavigationFailureType
        • aborted
        • cancelled
        • duplicated
  • 动态路由
    • 添加路由
      • router.addRoute（会返回一个remove函数，可使用remove函数删除路由）
    • 添加嵌套路由
    • 移除路由
      • router.removeRoute
    • 查看路由
      • router.hasRoute(存在性检查)
      • router.getRoutes（获取全部route）