Fes.js 统一了API的出口，所有运行时API（包含Fes.js内置API和插件提供的API）全部通过@fesjs/fes导出。
import { someApi } from "@fesjs/fes"
提示
主要在插件里面使用，项目代码中一般用不到。
运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。
import { plugin, ApplyPluginsType } from '@fesjs/fes';
// 注册插件
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,
});
提示
主要在插件里面使用，项目代码中一般用不到。
运行时插件执行类型，enum 类型，包含三个属性：
定义页面的元信息
定义构建配置
定义运行时配置
返回当前 router 实例。
import { getRouter } from "@fesjs/fes";
const router = getRouter();
router.push();
返回当前路由的History
返回当前 route 实例，相当于在模板内使用 $route。必须在 setup 函数内调用。
import { useRoute } from "@fesjs/fes";
export default {
setup(){
const route = useRoute()
}
}
返回 router 实例，相当于在模板语法中使用 $router。必须在 setup 函数内调用。
import { useRouter } from "@fesjs/fes";
export default {
setup(){
const router = useRouter()
}
}
添加导航守卫，在当前路由即将更新时触发。类似于之前的beforeRouteUpdate，但是可用于任何组件。卸载组件时，将移除守卫。
import { onBeforeRouteUpdate } from "@fesjs/fes";
export default {
setup(){
onBeforeRouteUpdate((to, from, next)=>{
})
}
}
添加导航守卫，在当前路由即将离开时触发。类似于之前的beforeRouteLeave，但可用于任何组件。卸载组件时，将移除守卫。
import { onBeforeRouteLeave } from "@fesjs/fes";
export default {
setup(){
onBeforeRouteLeave((to, from, next)=>{
})
}
}
提示
在开发插件时可能用上，平时一般用不上
创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意URL时这非常有用。注意：如果 SEO 对你很重要，你应该使用 createWebHistory。
提示
在开发插件时可能用上，平时一般用不上
创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。
提示
在开发插件时可能用上，平时一般用不上
创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。
使用自定义组件路由器链接来创建链接，而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。
<router-link to="/about">Go to About</router-link>
import { RouterLink, useLink } from '@fesjs/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 }
},
}
router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方，以适应你的布局。
<router-view></router-view>
<router-view v-slot="{ Component, route }">
<component :is="Component" />
</router-view>