"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[476],{436:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-76cd065c",path:"/reference/api/",title:"API",lang:"zh-CN",frontmatter:{sidebar:"auto"},excerpt:"",headers:[{level:2,title:"基础API",slug:"基础api",children:[{level:3,title:"plugin",slug:"plugin",children:[]},{level:3,title:"ApplyPluginsType",slug:"applypluginstype",children:[]}]},{level:2,title:"路由API",slug:"路由api",children:[{level:3,title:"getRouter",slug:"getrouter",children:[]},{level:3,title:"useRoute",slug:"useroute",children:[]},{level:3,title:"useRouter",slug:"userouter",children:[]},{level:3,title:"onBeforeRouteUpdate",slug:"onbeforerouteupdate",children:[]},{level:3,title:"onBeforeRouteLeave",slug:"onbeforerouteleave",children:[]},{level:3,title:"createWebHashHistory",slug:"createwebhashhistory",children:[]},{level:3,title:"createWebHistory",slug:"createwebhistory",children:[]},{level:3,title:"createMemoryHistory",slug:"creatememoryhistory",children:[]},{level:3,title:"createRouter",slug:"createrouter",children:[]},{level:3,title:"RouterLink",slug:"routerlink",children:[]},{level:3,title:"useLink",slug:"uselink",children:[]},{level:3,title:"RouterView",slug:"routerview",children:[]},{level:3,title:"Router Methods",slug:"router-methods",children:[]}]}],filePathRelative:"reference/api/README.md",git:{updatedTime:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5930:(n,s,a)=>{a.r(s),a.d(s,{default:()=>f});var e=a(6252);const p=(0,e.uE)('

API

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

import { someApi  } from "@fesjs/fes"\n

基础API

plugin

提示

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

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

import { plugin, ApplyPluginsType } from '@fesjs/fes';\n\n// 注册插件\nplugin.register({\n  apply: { dva: { foo: 1 } },\n  path: 'foo',\n});\nplugin.register({\n  apply: { dva: { bar: 1 } },\n  path: 'bar',\n});\n\n// 执行插件\n// 得到 { foo: 1, bar: 1 }\nplugin.applyPlugins({\n  key: 'dva',\n  type: ApplyPluginsType.modify,\n  initialValue: {},\n  args: {},\n  async: false,\n});\n\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

plugin.register 参数包含:

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

plugin.applyPlugins 参数包含:

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

ApplyPluginsType

提示

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

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

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

路由API

',17),t={href:"https://next.router.vuejs.org/introduction.html",target:"_blank",rel:"noopener noreferrer"},o=(0,e.uE)('

getRouter

返回当前 router 实例。

import { getRouter } from "@fesjs/fes";\nconst router = getRouter();\nrouter.push();\n

1
2
3

useRoute

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

import { useRoute } from "@fesjs/fes";\nexport default {\n    setup(){\n        const route = useRoute()\n    }\n}\n

1
2
3
4
5
6

useRouter

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

import { useRouter } from "@fesjs/fes";\nexport default {\n    setup(){\n        const router = useRouter()\n    }\n}\n

1
2
3
4
5
6

onBeforeRouteUpdate

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

import { onBeforeRouteUpdate } from "@fesjs/fes";\nexport default {\n    setup(){\n        onBeforeRouteUpdate((to, from, next)=>{\n        })\n    }\n}\n

1
2
3
4
5
6
7

onBeforeRouteLeave

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

import { onBeforeRouteLeave } from "@fesjs/fes";\nexport default {\n    setup(){\n        onBeforeRouteLeave((to, from, next)=>{\n        })\n    }\n}\n

1
2
3
4
5
6
7

createWebHashHistory

提示

在开发插件时可能用上，平时一般用不上

创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意URL时这非常有用。注意：如果 SEO 对你很重要，你应该使用 createWebHistory。

createWebHistory

提示

在开发插件时可能用上，平时一般用不上

创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址。

createMemoryHistory

提示

在开发插件时可能用上，平时一般用不上

创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。

createRouter

',25),r={href:"https://next.router.vuejs.org/api/#routeroptions",target:"_blank",rel:"noopener noreferrer"},l=(0,e.uE)('

RouterLink

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

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

',3),c={href:"https://next.router.vuejs.org/api/#router-link-props",target:"_blank",rel:"noopener noreferrer"},u={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},i=(0,e._)("h3",{id:"uselink",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#uselink","aria-hidden":"true"},"#"),(0,e.Uk)(" useLink")],-1),k={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},d=(0,e.uE)('

import { RouterLink, useLink } from '@fesjs/fes'\n\nexport default {\n  name: 'AppLink',\n\n  props: {\n    // add @ts-ignore if using TypeScript\n    ...RouterLink.props,\n    inactiveClass: String,\n  },\n\n  setup(props) {\n    // `props` contains `to` and any other prop that can be passed to <router-link>\n    const { navigate, href, route, isActive, isExactActive } = useLink(props)\n\n    // profit!\n\n    return { isExternalLink }\n  },\n}\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

RouterView

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

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

1
2
3
4

',4),b={href:"https://next.router.vuejs.org/api/#router-view-props",target:"_blank",rel:"noopener noreferrer"},h={href:"https://next.router.vuejs.org/api/#router-view-s-v-slot",target:"_blank",rel:"noopener noreferrer"},m=(0,e._)("h3",{id:"router-methods",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#router-methods","aria-hidden":"true"},"#"),(0,e.Uk)(" Router Methods")],-1),g={href:"https://next.router.vuejs.org/api/#router-methods",target:"_blank",rel:"noopener noreferrer"},v={},f=(0,a(3744).Z)(v,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("p",null,[(0,e.Uk)("Fes.js 路由基于 "),(0,e._)("a",t,[(0,e.Uk)("Vue Router 4.0"),(0,e.Wm)(a)]),(0,e.Uk)("，想了解更多的同学可以看看官方文档。")]),o,(0,e._)("p",null,[(0,e.Uk)("创建一个路由器实例，该实例可用于 Vue 应用程序。查看"),(0,e._)("a",r,[(0,e.Uk)("路由器选项"),(0,e.Wm)(a)]),(0,e.Uk)("，了解可以传递的所有属性的列表。")]),l,(0,e._)("p",null,[(0,e.Uk)("可以查看"),(0,e._)("a",c,[(0,e.Uk)("官方文档"),(0,e.Wm)(a)]),(0,e.Uk)("了解更多 RouterLink 的 Porps。查看"),(0,e._)("a",u,[(0,e.Uk)("官方文档"),(0,e.Wm)(a)]),(0,e.Uk)("了解 RouterLink 的作用域插槽。")]),i,(0,e._)("p",null,[(0,e.Uk)("返回的结果跟 RouterLink 的作用域插槽的属性一致，查看"),(0,e._)("a",k,[(0,e.Uk)("官方API"),(0,e.Wm)(a)]),(0,e.Uk)("了解更多。")]),d,(0,e._)("p",null,[(0,e.Uk)("可以查看"),(0,e._)("a",b,[(0,e.Uk)("官方文档"),(0,e.Wm)(a)]),(0,e.Uk)("了解更多 RouterView 的 Porps。查看"),(0,e._)("a",h,[(0,e.Uk)("官方文档"),(0,e.Wm)(a)]),(0,e.Uk)("了解 RouterView 的作用域插槽。")]),m,(0,e._)("p",null,[(0,e.Uk)("查看"),(0,e._)("a",g,[(0,e.Uk)("官方文档"),(0,e.Wm)(a)]),(0,e.Uk)("了解更多")])],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]);

# API

# 基础API

# plugin

# plugin.register 参数包含:

# plugin.applyPlugins 参数包含:

# ApplyPluginsType

# 路由API

# getRouter

# useRoute

# useRouter

# onBeforeRouteUpdate

# onBeforeRouteLeave

# createWebHashHistory

# createWebHistory

# createMemoryHistory

# createRouter

# RouterLink

# RouterView

API

基础API

plugin

plugin.register 参数包含:

plugin.applyPlugins 参数包含:

ApplyPluginsType

路由API

getRouter

useRoute

useRouter

onBeforeRouteUpdate

onBeforeRouteLeave

createWebHashHistory

createWebHistory

createMemoryHistory

createRouter

RouterLink

RouterView