fes.js/docs/zh/reference/api

sidebar
auto

API

Fes.js 统一了API的出口，所有运行时API（包含Fes.js内置API和插件提供的API）全部通过@webank/fes导出。

import { someApi  } from "@webank/fes"

基础API

plugin

::: tip 主要在插件里面使用，项目代码中一般用不到。 :::

运行时插件接口，是 Umi 内置的跑在浏览器里的一套插件体系。

import { plugin, ApplyPluginsType } from 'umi';

// 注册插件
plugin.register({
  apply: { dva: { foo: 1 } },
  path: 'foo',
});
plugin.register({
  apply: { dva: { bar: 1 } },
  path: 'bar',
});

// 执行插件
// 得到 { foo: 1, bar: 1 }
plugin.applyPlugins({
  key: 'dva',
  type: ApplyPluginsType.modify,
  initialValue: {},
  args: {},
  async: false,
});

plugin.register 参数包含:

• apply 插件文件导出的内容
• path 插件文件路径

plugin.applyPlugins 参数包含:

• key，坑位的 key
• type，执行方式类型，详见 ApplyPluginsType
• initialValue，初始值
• args，参数
• async，是否异步执行且返回 Promise

ApplyPluginsType

::: tip 主要在插件里面使用，项目代码中一般用不到。 :::

运行时插件执行类型，enum 类型，包含三个属性：

• compose，用于合并执行多个函数，函数可决定前序函数的执行时机
• modify，用于修改值
• event，用于执行事件，前面没有依赖关系

路由API

Fes.js 路由基于 Vue Router 4.0，想了解更多的同学可以看看官方文档。

useRoute

返回当前 route 实例，相当于在模板内使用 $route。必须在 setup 函数内调用。

import { useRoute } from "@webank/fes";
export default {
    setup(){
        const route = useRoute()
    }
}

useRouter

返回 router 实例，相当于在模板语法中使用 $router。必须在 setup 函数内调用。

import { useRouter } from "@webank/fes";
export default {
    setup(){
        const router = useRouter()
    }
}

onBeforeRouteUpdate

添加导航守卫，在当前路由即将更新时触发。类似于之前的beforeRouteUpdate，但是可用于任何组件。卸载组件时，将移除守卫。

import { onBeforeRouteUpdate } from "@webank/fes";
export default {
    setup(){
        onBeforeRouteUpdate((to, from, next)=>{
        })
    }
}

onBeforeRouteLeave

添加导航守卫，在当前路由即将离开时触发。类似于之前的beforeRouteLeave，但可用于任何组件。卸载组件时，将移除守卫。

import { onBeforeRouteLeave } from "@webank/fes";
export default {
    setup(){
        onBeforeRouteLeave((to, from, next)=>{
        })
    }
}

createWebHashHistory

::: tip 在开发插件时可能用上，平时一般用不上 ::: 创建哈希历史记录。对于没有 host（例如file://）或者需要部署在非根目录时非常有用 。请注意，如果SEO对您很重要，您应该使用createWebHistory。

createWebHistory

::: tip 在开发插件时可能用上，平时一般用不上 ::: 创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。

createMemoryHistory

::: tip 在开发插件时可能用上，平时一般用不上 ::: 创建基于内存的历史。此历史的主要目的是处理 SSR。它开始于一个特殊的混沌 location 。如果用户不在浏览器上下文中，则由他们通过调用router.push()或router.replace()变更 location。

createRouter

创建一个路由器实例，该实例可用于 Vue 应用程序。查看路由器选项，了解可以传递的所有属性的列表。

RouterLink

使用自定义组件路由器链接来创建链接，而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。

<router-link to="/about">Go to About</router-link>

可以查看官方文档了解更多 RouterLink 的 Porps。查看官方文档了解 RouterLink 的作用域插槽。

useLink

返回的结果跟 RouterLink 的作用域插槽的属性一致，查看官方API了解更多。

import { RouterLink, useLink } from '@webank/fes'

export default {
  name: 'AppLink',

  props: {
    // add @ts-ignore if using TypeScript
    ...RouterLink.props,
    inactiveClass: String,
  },

  setup(props) {
    // `props` contains `to` and any other prop that can be passed to <router-link>
    const { navigate, href, route, isActive, isExactActive } = useLink(props)

    // profit!

    return { isExternalLink }
  },
}

RouterView

router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方，以适应你的布局。

<router-view></router-view>
<router-view v-slot="{ Component, route }">
  <component :is="Component" />
</router-view>

可以查看官方文档了解更多 RouterView 的 Porps。查看官方文档了解 RouterView 的作用域插槽。

Router Methods

查看官方文档了解更多