mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
66 lines
32 KiB
JavaScript
66 lines
32 KiB
JavaScript
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.b31a4d00.js";const B=JSON.parse('{"title":"API","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/api/index.md"}'),o={name:"reference/api/index.md"},p=l(`<h1 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h1><p>Fes.js 统一了 API 的出口，所有运行时 API（包含 Fes.js 内置 API 和插件提供的 API）全部通过<code>@fesjs/fes</code>导出。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">someApi</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="基础-api" tabindex="-1">基础 API <a class="header-anchor" href="#基础-api" aria-label="Permalink to "基础 API""></a></h2><h3 id="plugin" tabindex="-1">plugin <a class="header-anchor" href="#plugin" aria-label="Permalink to "plugin""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>主要在插件里面使用，项目代码中一般用不到。</p></div><p>运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">plugin</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">ApplyPluginsType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;">// 注册插件</span></span>
|
||
<span class="line"><span style="color:#BABED8;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">register</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">apply</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">dva</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">1</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#BABED8;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">register</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">apply</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">dva</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">bar</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">1</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;">// 执行插件</span></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;">// 得到 { foo: 1, bar: 1 }</span></span>
|
||
<span class="line"><span style="color:#BABED8;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">applyPlugins</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">dva</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> ApplyPluginsType</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">modify</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">initialValue</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">args</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">async</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="plugin-register-参数包含" tabindex="-1"><strong>plugin.register</strong> 参数包含: <a class="header-anchor" href="#plugin-register-参数包含" aria-label="Permalink to "**plugin.register** 参数包含:""></a></h4><ul><li>apply 插件文件导出的内容</li><li>path 插件文件路径</li></ul><h4 id="plugin-applyplugins-参数包含" tabindex="-1"><strong>plugin.applyPlugins</strong> 参数包含: <a class="header-anchor" href="#plugin-applyplugins-参数包含" aria-label="Permalink to "**plugin.applyPlugins** 参数包含:""></a></h4><ul><li>key，坑位的 key</li><li>type，执行方式类型，详见 <a href="#applypluginstype">ApplyPluginsType</a></li><li>initialValue，初始值</li><li>args，参数</li><li>async，是否异步执行且返回 Promise</li></ul><h3 id="applypluginstype" tabindex="-1">ApplyPluginsType <a class="header-anchor" href="#applypluginstype" aria-label="Permalink to "ApplyPluginsType""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>主要在插件里面使用，项目代码中一般用不到。</p></div><p>运行时插件执行类型，enum 类型，包含三个属性：</p><ul><li>compose，用于合并执行多个函数，函数可决定前序函数的执行时机</li><li>modify，用于修改值</li><li>event，用于执行事件，前面没有依赖关系</li></ul><h3 id="defineroutemeta" tabindex="-1">defineRouteMeta <a class="header-anchor" href="#defineroutemeta" aria-label="Permalink to "defineRouteMeta""></a></h3><p>定义页面的元信息</p><h3 id="definebuildconfig" tabindex="-1">defineBuildConfig <a class="header-anchor" href="#definebuildconfig" aria-label="Permalink to "defineBuildConfig""></a></h3><p>定义构建配置</p><h3 id="defineruntimeconfig" tabindex="-1">defineRuntimeConfig <a class="header-anchor" href="#defineruntimeconfig" aria-label="Permalink to "defineRuntimeConfig""></a></h3><p>定义运行时配置</p><h2 id="路由-api" tabindex="-1">路由 API <a class="header-anchor" href="#路由-api" aria-label="Permalink to "路由 API""></a></h2><p>Fes.js 路由基于 <a href="https://next.router.vuejs.org/introduction.html" target="_blank" rel="noreferrer">Vue Router 4.0</a>，想了解更多的同学可以看看官方文档。</p><h3 id="getrouter" tabindex="-1">getRouter <a class="header-anchor" href="#getrouter" aria-label="Permalink to "getRouter""></a></h3><p>返回当前 <code>router</code> 实例。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">getRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> router </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">getRouter</span><span style="color:#BABED8;">()</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#BABED8;">()</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="gethistory" tabindex="-1">getHistory <a class="header-anchor" href="#gethistory" aria-label="Permalink to "getHistory""></a></h3><p>返回当前路由的 History</p><h3 id="useroute" tabindex="-1">useRoute <a class="header-anchor" href="#useroute" aria-label="Permalink to "useRoute""></a></h3><p>返回当前 <code>route</code> 实例，相当于在模板内使用 <code>$route</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useRoute</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">route</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRoute</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="userouter" tabindex="-1">useRouter <a class="header-anchor" href="#userouter" aria-label="Permalink to "useRouter""></a></h3><p>返回 <code>router</code> 实例，相当于在模板语法中使用 <code>$router</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRouter</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="onbeforerouteupdate" tabindex="-1">onBeforeRouteUpdate <a class="header-anchor" href="#onbeforerouteupdate" aria-label="Permalink to "onBeforeRouteUpdate""></a></h3><p>添加导航守卫，在当前路由即将更新时触发。类似于之前的<code>beforeRouteUpdate</code>，但是可用于任何组件。卸载组件时，将移除守卫。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">onBeforeRouteUpdate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">onBeforeRouteUpdate</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">next</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="onbeforerouteleave" tabindex="-1">onBeforeRouteLeave <a class="header-anchor" href="#onbeforerouteleave" aria-label="Permalink to "onBeforeRouteLeave""></a></h3><p>添加导航守卫，在当前路由即将离开时触发。类似于之前的<code>beforeRouteLeave</code>，但可用于任何组件。卸载组件时，将移除守卫。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">onBeforeRouteLeave</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">onBeforeRouteLeave</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">next</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="createwebhashhistory" tabindex="-1">createWebHashHistory <a class="header-anchor" href="#createwebhashhistory" aria-label="Permalink to "createWebHashHistory""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意 URL 时这非常有用。注意：如果 SEO 对你很重要，你应该使用 <code>createWebHistory</code>。</p><h3 id="createwebhistory" tabindex="-1">createWebHistory <a class="header-anchor" href="#createwebhistory" aria-label="Permalink to "createWebHistory""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建 HTML5 历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。</p><h3 id="creatememoryhistory" tabindex="-1">createMemoryHistory <a class="header-anchor" href="#creatememoryhistory" aria-label="Permalink to "createMemoryHistory""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。</p><h3 id="createrouter" tabindex="-1">createRouter <a class="header-anchor" href="#createrouter" aria-label="Permalink to "createRouter""></a></h3><p>创建一个路由器实例，该实例可用于 Vue 应用程序。查看<a href="https://next.router.vuejs.org/api/#routeroptions" target="_blank" rel="noreferrer">路由器选项</a>，了解可以传递的所有属性的列表。</p><h3 id="routerlink" tabindex="-1">RouterLink <a class="header-anchor" href="#routerlink" aria-label="Permalink to "RouterLink""></a></h3><p>使用自定义组件路由器链接来创建链接，而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">to</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/about</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Go to About</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;">></span></span></code></pre></div><p>可以查看<a href="https://next.router.vuejs.org/api/#router-link-props" target="_blank" rel="noreferrer">官方文档</a>了解更多 RouterLink 的 Porps。查看<a href="https://next.router.vuejs.org/api/#router-link-s-v-slot" target="_blank" rel="noreferrer">官方文档</a>了解 RouterLink 的作用域插槽。</p><h3 id="uselink" tabindex="-1">useLink <a class="header-anchor" href="#uselink" aria-label="Permalink to "useLink""></a></h3><p>返回的结果跟 RouterLink 的作用域插槽的属性一致，查看<a href="https://next.router.vuejs.org/api/#router-link-s-v-slot" target="_blank" rel="noreferrer">官方 API</a>了解更多。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">RouterLink</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useLink</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">AppLink</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">props</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// add @ts-ignore if using TypeScript</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">RouterLink</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">props</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">inactiveClass</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> String</span><span style="color:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">props</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// \`props\` contains \`to\` and any other prop that can be passed to <router-link></span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">navigate</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">href</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">route</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isActive</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isExactActive</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useLink</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">props</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// profit!</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isExternalLink</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="routerview" tabindex="-1">RouterView <a class="header-anchor" href="#routerview" aria-label="Permalink to "RouterView""></a></h3><p>router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方，以适应你的布局。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-slot</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">{ Component, route }</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">component</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:is</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Component</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;">></span></span></code></pre></div><p>可以查看<a href="https://next.router.vuejs.org/api/#router-view-props" target="_blank" rel="noreferrer">官方文档</a>了解更多 RouterView 的 Porps。查看<a href="https://next.router.vuejs.org/api/#router-view-s-v-slot" target="_blank" rel="noreferrer">官方文档</a>了解 RouterView 的作用域插槽。</p><h3 id="其他-router-methods" tabindex="-1">其他 Router Methods <a class="header-anchor" href="#其他-router-methods" aria-label="Permalink to "其他 Router Methods""></a></h3><p>查看<a href="https://next.router.vuejs.org/api/#router-methods" target="_blank" rel="noreferrer">vue-router 官方文档</a>了解更多。</p>`,65),e=[p];function t(r,c,y,D,i,F){return a(),n("div",null,e)}const d=s(o,[["render",t]]);export{B as __pageData,d as default};
|