vue-router 4.0.0-alpha API

vue-router

• createRouter 创建路由

  const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
  })
  
  router.beforeEach(...)
  router.afterEach(...)
           
  
  vue.use(router)
  

• createWebHashHistory hash 路由

• createWebHistory history 路由

• createMemoryHistory 带缓存 history 路由

• parseQuery 查询参数反序列化

• stringifyQuery 查询参数序列化

• onBeforeRouteLeave 路由离开钩子

  • to 目标路由信息
  • from 当前路由信息
  • next 跳转函数

• useRoute 返回当前路由， 子属性都被ref包装

  • path
  • name
  • params
  • query
  • hash
  • fullpath
  • matched
  • meta
  • redirectedFrom

• useRouter 返回路由实例

  • currentRoute 返回当前路由 , 非ref
  • addRoute 动态添加路由
  • removeRoute 动态删除路由
  • hasRoute
  • getRoutes 获取路由配置, 替换原 3.0 routes 属性
  • push 路由跳转
  • replace 路由重定向
  • resolve 解析目标路由
  • beforeEach 全局路由守卫, 路由跳转前
  • afterEach 全局路由守卫, 路由跳转后台
  • onError 报错监听
  • isReady 路由是否初始话， 返回Promise, 替代原3.0 onReady
  • history 路由执行器
  • install vue插件安装器

• useLink 自定义路由跳转函数, 接受一个路由配置，并返回路由信息及执行回调

  • route 路由对象
  • href 目标地址
  • isActive 是否被激活
  • isExactActive
  • navigate 跳转回调

  const { route, href, isActive, isExactActive,navigate } = useLink({ to: '/sub', from :'/sub' }) 
  

• Link router-link 组件， 私有属性

• View router-view 组件， 私有属性

• START_LOCATION 起始路由

• NavigationFailureType 故障类型

总结

将路由拆分为 hash， history，memory history 三种路由形式. 将类的创建方式改为函数式。 除去个别修改例如： isReady， 总体的 API 结构没有太大变化，最大化减少了学习成本.