Vue Rotuter 4.0.0-alpha API

内容纲要
  • 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 故障类型
THE END
分享
二维码
< <上一篇
下一篇>>