fes.js/assets/reference_plugin_plugins_layout.md.5c7c196b.js

import{o as p,c as e,C as s,b as a,V as o,a as l,y as n}from"./chunks/framework.b31a4d00.js";const t=o(`<h1 id="fesjs-plugin-layout" tabindex="-1">@fesjs/plugin-layout <a class="header-anchor" href="#fesjs-plugin-layout" aria-label="Permalink to &quot;@fesjs/plugin-layout&quot;">​</a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to &quot;介绍&quot;">​</a></h2><p>为了进一步降低研发成本，我们将布局利用 <code>fes.js</code> 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。</p><ul><li>侧边栏菜单数据根据路由中的配置自动生成。</li><li>布局，提供 <code>side</code>、 <code>top</code>、<code>mixin</code>、<code>left-right</code>、<code>top-left-right</code> 五种布局。</li><li>主题，提供 <code>light</code>、<code>dark</code> 两种主题。</li><li>默认实现对路由的 404、403 处理。</li><li>搭配 <a href="./access.html">@fesjs/plugin-access</a> 插件使用，可以完成对路由的权限控制。</li><li>搭配 <a href="./locale.html">@fesjs/plugin-locale</a> 插件使用，提供切换语言的能力。</li><li>支持自定义头部或者侧边栏区域。</li><li>菜单支持配置 icon。</li><li>菜单标题支持国际化。</li><li>可配置页面是否需要 layout。</li></ul><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to &quot;启用方式&quot;">​</a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">&quot;</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:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">@fesjs/plugin-layout</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">^5.0.0</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="布局类型" tabindex="-1">布局类型 <a class="header-anchor" href="#布局类型" aria-label="Permalink to &quot;布局类型&quot;">​</a></h2><p>配置参数是 <code>navigation</code>, 布局有五种类型 <code>side</code>、<code>mixin</code> 、<code>top</code> 、<code>left-right</code>、<code>top-left-right</code>， 默认是 <code>side</code>。</p><h3 id="side" tabindex="-1">side <a class="header-anchor" href="#side" aria-label="Permalink to &quot;side&quot;">​</a></h3>`,10),c=["src"],r=s("h3",{id:"top",tabindex:"-1"},[l("top "),s("a",{class:"header-anchor",href:"#top","aria-label":'Permalink to "top"'},"​")],-1),i=["src"],F=s("h3",{id:"mixin",tabindex:"-1"},[l("mixin "),s("a",{class:"header-anchor",href:"#mixin","aria-label":'Permalink to "mixin"'},"​")],-1),D=["src"],y=s("h3",{id:"left-right",tabindex:"-1"},[l("left-right "),s("a",{class:"header-anchor",href:"#left-right","aria-label":'Permalink to "left-right"'},"​")],-1),d=["src"],B=["src"],u=o(`<h3 id="页面个性化" tabindex="-1">页面个性化 <a class="header-anchor" href="#页面个性化" aria-label="Permalink to &quot;页面个性化&quot;">​</a></h3><p>可以为页面单独设置布局类型：</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;">defineRouteMeta</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;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">defineRouteMeta</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">layout</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;">navigation</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">null,</span></span>
<span class="line"><span style="color:#BABED8;">    </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><p>当设置为 <code>null</code> 时，页面不使用布局。</p><h2 id="页面缓存" tabindex="-1">页面缓存 <a class="header-anchor" href="#页面缓存" aria-label="Permalink to &quot;页面缓存&quot;">​</a></h2><p>支持配置页面缓存，通过<a href="./../../../guide/route.html#扩展路由元信息">定义路由元信息</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;">defineRouteMeta</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;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">defineRouteMeta</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">keep-alive</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</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><h3 id="处理嵌套路由" tabindex="-1">处理嵌套路由 <a class="header-anchor" href="#处理嵌套路由" aria-label="Permalink to &quot;处理嵌套路由&quot;">​</a></h3><p>Fes.js 里约定目录下有 <code>layout.vue</code> 时会生成嵌套路由，以 <code>layout.vue</code> 为该目录的公共父组件，layout.vue 中必须实现 <code>&lt;RouterView/&gt;</code>。如果嵌套路由下的页面设置了 <code>keep-alive</code>，则需要用 <code>&lt;Page/&gt;</code> 替换 <code>&lt;RouterView/&gt;</code>，<code>&lt;Page/&gt;</code>实现了页面缓存。</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">Page</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<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;">Page</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;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</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;">components</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;">        Page</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 style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to &quot;配置&quot;">​</a></h2><h4 id="编译时配置方式" tabindex="-1">编译时配置方式 <a class="header-anchor" href="#编译时配置方式" aria-label="Permalink to &quot;编译时配置方式&quot;">​</a></h4><p>在 <code>.fes.js</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;">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;">layout</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;">// 标题</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Fes.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 底部文字</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">footer</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Created by MumbleFE</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 主题light</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">theme</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">dark</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F07178;">menus</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;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><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;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">onepiece</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><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;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><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;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">simpleList</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><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:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 403 页面配置</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F78C6C;">403</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;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">没有访问权限，请联系管理人员</span><span style="color:#89DDFF;">&#39;</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 style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 404 页面配置</span></span>
<span class="line"><span style="color:#BABED8;">        </span><span style="color:#F78C6C;">404</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;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">哎呀！这个页面找不到了</span><span style="color:#89DDFF;">&#39;</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 style="color:#BABED8;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h4 id="运行时配置方式" tabindex="-1">运行时配置方式 <a class="header-anchor" href="#运行时配置方式" aria-label="Permalink to &quot;运行时配置方式&quot;">​</a></h4><p>在 <code>app.js</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;"> UserCenter </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/components/UserCenter</span><span style="color:#89DDFF;">&#39;</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:#C792EA;">const</span><span style="color:#BABED8;"> layout </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:#82AAFF;">renderCustom</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">UserCenter</span><span style="color:#89DDFF;"> /&gt;,</span></span>
<span class="line"><span style="color:#BABED8;">    </span><span style="color:#F07178;">menus</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><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;">&#39;</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">&#39;</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 style="color:#BABED8;">    ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>在<code>fes.js</code>中，运行时配置有定义对象和函数两种方式，当使用函数配置<code>layout</code>时，<code>layoutConfig</code>是编译时配置结果，<code>initialState</code>是 <code>beforeRender.action</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;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">layout</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">layoutConfig</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">initialState</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:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">renderCustom</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">UserCenter</span><span style="color:#89DDFF;"> /&gt;,</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">menus</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </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;">menusRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">layoutConfig</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">menus</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">watch</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">initialState</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">userName</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                    </span><span style="color:#BABED8;">menusRef</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> [</span></span>
<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                            name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">&#39;</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:#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:#F07178;">            )</span><span style="color:#89DDFF;">;</span></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:#BABED8;">menusRef</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:#F07178;">    </span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>最终配置结果是运行时配置跟编译时配置合并的结果，运行时配置优先于编译时配置。</p><p>实际上运行配置能做的事情更多，推荐用运行时配置方式。</p><h3 id="footer" tabindex="-1">footer <a class="header-anchor" href="#footer" aria-label="Permalink to &quot;footer&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>null</code></p></li><li><p><strong>详情</strong>：页面底部的文字。</p></li></ul><h3 id="theme" tabindex="-1">theme <a class="header-anchor" href="#theme" aria-label="Permalink to &quot;theme&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>dark</code></p></li><li><p><strong>详情</strong>：主题，可选有 <code>dark</code>、<code>light</code></p></li></ul><h3 id="navigation" tabindex="-1">navigation <a class="header-anchor" href="#navigation" aria-label="Permalink to &quot;navigation&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>side</code></p></li><li><p><strong>详情</strong>：页面布局类型，可选有 <code>side</code>、 <code>top</code>、 <code>mixin</code></p></li></ul><h3 id="navigationonerror" tabindex="-1">navigationOnError <a class="header-anchor" href="#navigationonerror" aria-label="Permalink to &quot;navigationOnError&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>String</code>、<code>Function</code></p></li><li><p><strong>详情</strong>：指定 <code>403</code>、<code>404</code> 时，页面的布局类型。值同 <code>navigation</code>。也支持函数返回。</p></li></ul><h3 id="isfixedheader" tabindex="-1">isFixedHeader <a class="header-anchor" href="#isfixedheader" aria-label="Permalink to &quot;isFixedHeader&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>Boolean</code></p></li><li><p><strong>默认值</strong>：<code>false</code></p></li><li><p><strong>详情</strong>：是否固定头部，不跟随页面滚动。</p></li></ul><h3 id="isfixedsidebar" tabindex="-1">isFixedSidebar <a class="header-anchor" href="#isfixedsidebar" aria-label="Permalink to &quot;isFixedSidebar&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>Boolean</code></p></li><li><p><strong>默认值</strong>：<code>true</code></p></li><li><p><strong>详情</strong>：是否固定 sidebar，不跟随页面滚动。</p></li></ul><h3 id="title" tabindex="-1">title <a class="header-anchor" href="#title" aria-label="Permalink to &quot;title&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：默认为 <a href="./../../../reference/config/#title">编译时配置 title</a></p></li><li><p><strong>详情</strong>：产品名，当配置为&quot;$&quot;开头时，开启国际化，使用<code>$</code>后面的内容去匹配语言设置。</p></li></ul><h3 id="logo" tabindex="-1">logo <a class="header-anchor" href="#logo" aria-label="Permalink to &quot;logo&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：默认提供 <code>fes.js</code> 的 Logo</p></li><li><p><strong>详情</strong>：Logo 的链接，例如在 public/logo.png 放了一个 logo，可以这么配置(<a href="./../../../guide/env.html#process-env">BASE_URL 来自这里</a>)</p></li></ul><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;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> layout </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;">logo</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">BASE_URL</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">logo.png</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="multitabs" tabindex="-1">multiTabs <a class="header-anchor" href="#multitabs" aria-label="Permalink to &quot;multiTabs&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>boolean</code></p></li><li><p><strong>默认值</strong>：<code>false</code></p></li><li><p><strong>详情</strong>：是否开启多页。可通过 tabReload: false 控制标签页是否重新加载。</p></li></ul><h3 id="menus" tabindex="-1">menus <a class="header-anchor" href="#menus" aria-label="Permalink to &quot;menus&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>[] | () =&gt; Ref&lt;[]&gt; | () =&gt; []</code></p></li><li><p><strong>默认值</strong>：<code>[]</code></p></li><li><p><strong>详情</strong>：菜单配置</p><p>子项具体配置如下：</p><ul><li><p><strong>name</strong>：菜单的名称。通过匹配 <code>name</code> 和路由元信息 <a href="./../../../guide/route.html#扩展路由元信息">meta</a> 中的 <code>name</code>，把菜单和路由关联起来，\b 然后使用路由元信息补充菜单配置，比如 <code>title</code>、<code>path</code> \b 等。</p></li><li><p><strong>path</strong>：菜单的路径，可配置第三方地址。</p></li><li><p><strong>query</strong>：同 vue-router 的 query 参数。</p></li><li><p><strong>params</strong>：同 vue-router 的 params 参数。</p></li><li><p><strong>match (v4.0.0+）</strong>：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。</p><pre><code>\`\`\`
{
    path: &#39;/product&#39;,
    match: [&#39;/product/*&#39;, &#39;/product/create&#39;]
}
\`\`\`
</code></pre></li><li><p><strong>title</strong>：菜单的标题。</p><ul><li><p>如果同时使用<a href="./locale.html">国际化插件</a>，而且<code>title</code>的值以<code>$</code>开头，则使用<code>$</code>后面的内容去匹配语言设置。</p></li><li><p>title 支持配置函数，对应 Fes Design 中 Menu 组件的<code>label</code>插槽。仅在运行时配置中支持。</p></li></ul></li><li><p><strong>icon</strong>: 菜单的图标，只一级标题展示图标。</p><ul><li><p>图标使用<a href="https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html" target="_blank" rel="noreferrer">fes-design icon</a>，编译时配置使用组件名称，我们会自动引入组件。</p></li><li><p>图标使用本地或者远程 svg 图片。</p><pre><code>  \`\`\`js
  {
      icon: &#39;/wine-outline.svg&#39;;
  }
  \`\`\`
</code></pre></li></ul></li><li><p><strong>children</strong>：子菜单配置。</p></li><li><p><strong>_blank</strong>：是否在新的窗口打开页面，默认 http 开头的链接在新窗口打开</p></li></ul></li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>函数类型仅在运行时可用，可以实现动态变更菜单。</p></div><h3 id="menuprops" tabindex="-1">menuProps <a class="header-anchor" href="#menuprops" aria-label="Permalink to &quot;menuProps&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>Object</code></p></li><li><p><strong>默认值</strong>：<code>{}</code></p></li><li><p><strong>详情</strong>：菜单的配置：</p><ul><li><p><strong>defaultExpandAll</strong>：是否默认展开全部菜单。</p></li><li><p><strong>expandedKeys</strong>：配置默认展开的菜单，需要传子项是菜单路径的数组。</p></li><li><p><strong>accordion</strong>：是否只保持一个子菜单的展开。</p></li></ul></li></ul><h3 id="sidewidth" tabindex="-1">sideWidth <a class="header-anchor" href="#sidewidth" aria-label="Permalink to &quot;sideWidth&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>Number</code></p></li><li><p><strong>默认值</strong>：<code>200</code></p></li><li><p><strong>详情</strong>：sidebar 的宽度</p></li></ul><h3 id="rendercustom" tabindex="-1">renderCustom <a class="header-anchor" href="#rendercustom" aria-label="Permalink to &quot;renderCustom&quot;">​</a></h3><ul><li><p><strong>类型</strong>： <code>()=&gt; VNodes</code></p></li><li><p><strong>默认值</strong>：<code>null</code></p></li><li><p><strong>详情</strong>： 自定义区域内容，仅运行时。</p></li></ul><h3 id="unaccesshandler" tabindex="-1">unAccessHandler <a class="header-anchor" href="#unaccesshandler" aria-label="Permalink to &quot;unAccessHandler&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>({ to, from, next})=&gt; void</code></p></li><li><p><strong>默认值</strong>：<code>null</code></p></li><li><p><strong>详情</strong>：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 <code>unAccessHandler</code> 函数。</p></li><li><p><strong>参数</strong></p><ul><li>router：createRouter 创建的路由实例</li><li>to： 准备进入的路由</li><li>from：离开的路由</li><li>next： <a href="https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next" target="_blank" rel="noreferrer">next 函数</a></li></ul></li></ul><p>比如：</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;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> layout </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;">unAccessHandler</span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">next</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:#F07178;">        </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accesssIds</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">to</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">path</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></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:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">&#39;</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:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">&#39;</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:#F07178;">        </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">&#39;</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="nofoundhandler" tabindex="-1">noFoundHandler <a class="header-anchor" href="#nofoundhandler" aria-label="Permalink to &quot;noFoundHandler&quot;">​</a></h3><ul><li><p><strong>类型</strong>：<code>({ to, from, next})=&gt; void</code></p></li><li><p><strong>默认值</strong>：<code>null</code></p></li><li><p><strong>详情</strong>：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 <code>noFoundHandler</code> 函数。</p></li><li><p><strong>参数</strong></p><ul><li>router：createRouter 创建的路由实例</li><li>to： 准备进入的路由</li><li>from：离开的路由</li><li>next： <a href="https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next" target="_blank" rel="noreferrer">next 函数</a></li></ul></li></ul><p>比如：</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;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> layout </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;">noFoundHandler</span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">next</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:#F07178;">        </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accesssIds</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">&#39;</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:#F07178;">        </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">&#39;</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><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h3 id="usetabtitle-建议使用uselayout" tabindex="-1">useTabTitle（建议使用useLayout） <a class="header-anchor" href="#usetabtitle-建议使用uselayout" aria-label="Permalink to &quot;useTabTitle（建议使用useLayout）&quot;">​</a></h3><p>类型定义如下：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useTabTitle</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Ref</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">&gt;):</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>当使用多页签模式时，在页面中使用 <code>useTabTitle</code> 可以自定义页面标签：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<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:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useTabTitle</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;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> titleRef </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useTabTitle</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">详情-</span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">route</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">params</span><span style="color:#89DDFF;">?.</span><span style="color:#BABED8;">id</span><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:#BABED8;">titleRef</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">changed</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="uselayout" tabindex="-1">useLayout <a class="header-anchor" href="#uselayout" aria-label="Permalink to &quot;useLayout&quot;">​</a></h3><p>类型定义如下：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useLayout</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">options</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;">title</span><span style="color:#89DDFF;">?:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#BABED8;"> </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;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Ref</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">&gt;;</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">reloadTab</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">;</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">closeTab</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">};</span></span></code></pre></div><ul><li>title: 更新当前页签的标题</li><li>reloadTab：重载当前页签</li><li>closeTab：关闭当前页签</li></ul><h2 id="_4-x-升级到-5-x" tabindex="-1">4.x 升级到 5.x <a class="header-anchor" href="#_4-x-升级到-5-x" aria-label="Permalink to &quot;4.x 升级到 5.x&quot;">​</a></h2><ol><li>个性化 layout 配置改为使用传入 navigation</li><li>customHeader 改为 renderCustom</li><li>fixedHeader 改为 isFixedHeader</li><li>menusConfig 改为 menuProps</li><li>fixedSideBar 改为 isFixedSidebar</li><li>去掉运行时 logo、header、sidebar 三个区域显示配置，请改为使用 navigation: left-right</li></ol>`,69),m=JSON.parse('{"title":"@fesjs/plugin-layout","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/layout.md"}'),g={name:"reference/plugin/plugins/layout.md"},b=Object.assign(g,{setup(A){return(h,E)=>(p(),e("div",null,[t,s("img",{src:a(n)("side.png"),alt:"side"},null,8,c),r,s("img",{src:a(n)("top.png"),alt:"top"},null,8,i),F,s("img",{src:a(n)("mixin.png"),alt:"mixin"},null,8,D),y,s("img",{src:a(n)("left-right.png"),alt:"left-right"},null,8,d),s("img",{src:a(n)("top-left-right.png"),alt:"top-left-right"},null,8,B),u]))}});export{m as __pageData,b as default};