fes.js/assets/layout.html.76e01b19.js

import{_ as u,r as c,o as r,c as d,b as n,d as s,a as e,w as o,e as l,f as a}from"./app.136d0839.js";const k={},v=n("h1",{id:"fesjs-plugin-layout",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#fesjs-plugin-layout","aria-hidden":"true"},"#"),s(" @fesjs/plugin-layout")],-1),g=n("h2",{id:"介绍",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),s(" 介绍")],-1),h=n("p",null,[s("为了进一步降低研发成本，我们将布局利用 "),n("code",null,"fes.js"),s(" 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。")],-1),m=a("<li>侧边栏菜单数据根据路由中的配置自动生成。</li><li>布局，提供 <code>side</code>、 <code>top</code>、<code>mixin</code>、<code>left-right</code> 四种布局。</li><li>主题，提供 <code>light</code>、<code>dark</code> 两种主题。</li><li>默认实现对路由的 404、403 处理。</li>",4),b=n("li",null,"支持自定义头部或者侧边栏区域。",-1),f=n("li",null,"菜单支持配置 icon。",-1),_=n("li",null,"菜单标题支持国际化。",-1),x=n("li",null,"可配置页面是否需要 layout。",-1),y=a(`<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
    <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;@fesjs/plugin-layout&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^5.0.0&quot;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="布局类型" tabindex="-1"><a class="header-anchor" href="#布局类型" aria-hidden="true">#</a> 布局类型</h2><p>配置参数是 <code>navigation</code>, 布局有三种类型 <code>side</code>、<code>mixin</code> 、<code>top</code> 和 <code>left-right</code>， 默认是 <code>side</code>。</p><h3 id="side" tabindex="-1"><a class="header-anchor" href="#side" aria-hidden="true">#</a> side</h3>`,6),j=["src"],w=n("h3",{id:"top",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#top","aria-hidden":"true"},"#"),s(" top")],-1),A=["src"],E=n("h3",{id:"mixin",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#mixin","aria-hidden":"true"},"#"),s(" mixin")],-1),B=["src"],F=n("h3",{id:"left-right",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#left-right","aria-hidden":"true"},"#"),s(" left-right")],-1),C=["src"],R=a(`<h3 id="页面个性化" tabindex="-1"><a class="header-anchor" href="#页面个性化" aria-hidden="true">#</a> 页面个性化</h3><p>可以为页面单独设置布局类型：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMeta <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>

<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">navigation</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当设置为 <code>null</code> 时，页面不使用布局。</p><h2 id="页面缓存" tabindex="-1"><a class="header-anchor" href="#页面缓存" aria-hidden="true">#</a> 页面缓存</h2>`,5),q=a(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMeta <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>

<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token string-property property">&#39;keep-alive&#39;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="处理嵌套路由" tabindex="-1"><a class="header-anchor" href="#处理嵌套路由" aria-hidden="true">#</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 line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Page</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Page</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> Page <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        Page<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h4 id="编译时配置方式" tabindex="-1"><a class="header-anchor" href="#编译时配置方式" aria-hidden="true">#</a> 编译时配置方式</h4><p>在 <code>.fes.js</code> 中配置：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 标题</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;Fes.js&quot;</span><span class="token punctuation">,</span>
        <span class="token comment">// 底部文字</span>
        <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token string">&#39;Created by MumbleFE&#39;</span><span class="token punctuation">,</span>
        <span class="token comment">// 主题light</span>
        <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token string">&#39;dark&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;index&#39;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;onepiece&#39;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;store&#39;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;simpleList&#39;</span>
        <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>

    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="运行时配置方式" tabindex="-1"><a class="header-anchor" href="#运行时配置方式" aria-hidden="true">#</a> 运行时配置方式</h4><p>在 <code>app.js</code> 中配置：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> UserCenter <span class="token keyword">from</span> <span class="token string">&#39;@/components/UserCenter&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">renderCustom</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span>UserCenter <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;index&#39;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在<code>fes.js</code>中，运行时配置有定义对象和函数两种方式，当使用函数配置<code>layout</code>时，<code>layoutConfig</code>是编译时配置结果，<code>initialState</code>是 <code>beforeRender.action</code>执行后创建的应用初始状态数据。<br> 。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">layout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">layoutConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span> initialState <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token function-variable function">renderCustom</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span>UserCenter <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">menus</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> menusRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span>layoutConfig<span class="token punctuation">.</span>menus<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">watch</span><span class="token punctuation">(</span>
            <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> initialState<span class="token punctuation">.</span>userName<span class="token punctuation">,</span>
            <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                menusRef<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>
                        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;store&#39;</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> menusRef<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最终配置结果是运行时配置跟编译时配置合并的结果，运行时配置优先于编译时配置。</p><p>实际上运行配置能做的事情更多，推荐用运行时配置方式。</p><h3 id="footer" tabindex="-1"><a class="header-anchor" href="#footer" aria-hidden="true">#</a> footer</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"><a class="header-anchor" href="#theme" aria-hidden="true">#</a> theme</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"><a class="header-anchor" href="#navigation" aria-hidden="true">#</a> navigation</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="isfixedheader" tabindex="-1"><a class="header-anchor" href="#isfixedheader" aria-hidden="true">#</a> isFixedHeader</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"><a class="header-anchor" href="#isfixedsidebar" aria-hidden="true">#</a> isFixedSidebar</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"><a class="header-anchor" href="#title" aria-hidden="true">#</a> title</h3>`,26),S=n("li",null,[n("p",null,[n("strong",null,"类型"),s("："),n("code",null,"String")])],-1),T=n("strong",null,"默认值",-1),H=n("li",null,[n("p",null,[n("strong",null,"详情"),s("：产品名。")])],-1),I=a('<h3 id="logo" tabindex="-1"><a class="header-anchor" href="#logo" aria-hidden="true">#</a> logo</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 的链接</p></li></ul><h3 id="multitabs" tabindex="-1"><a class="header-anchor" href="#multitabs" aria-hidden="true">#</a> multiTabs</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="menus" tabindex="-1"><a class="header-anchor" href="#menus" aria-hidden="true">#</a> menus</h3>',5),P=n("li",null,[n("p",null,[n("strong",null,"类型"),s("："),n("code",null,"[] | () => Ref<[]> | () => []")])],-1),N=n("li",null,[n("p",null,[n("strong",null,"默认值"),s("："),n("code",null,"[]")])],-1),V=n("p",null,[n("strong",null,"详情"),s("：菜单配置")],-1),L=n("p",null,"子项具体配置如下：",-1),$=n("strong",null,"name",-1),M=n("code",null,"name",-1),U=n("code",null,"name",-1),z=n("code",null,"title",-1),D=n("code",null,"path",-1),K=a(`<li><p><strong>path</strong>：菜单的路径，可配置第三方地址。</p></li><li><p><strong>match (v4.0.0+）</strong>：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>{
    path: &#39;/product&#39;,
    match: [&#39;/product/*&#39;, &#39;/product/create&#39;]
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>`,2),O=n("p",null,[n("strong",null,"title"),s("：菜单的标题。")],-1),W=n("code",null,"title",-1),G=n("code",null,"$",-1),J=n("code",null,"$",-1),Q=n("li",null,[n("p",null,[s("title 支持配置函数，对应 Fes Design 中 Menu 组件的"),n("code",null,"label"),s("插槽。仅在运行时配置中支持。")])],-1),X=n("p",null,[n("strong",null,"icon"),s(": 菜单的图标，只一级标题展示图标。")],-1),Y={href:"https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html",target:"_blank",rel:"noopener noreferrer"},Z=a(`<li><p>图标使用本地或者远程 svg 图片。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
    <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">&#39;/wine-outline.svg&#39;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>`,1),nn=n("li",null,[n("p",null,[n("strong",null,"children"),s("：子菜单配置。")])],-1),sn=a('<div class="custom-container tip"><p class="custom-container-title">提示</p><p>函数类型仅在运行时可用，可以实现动态变更菜单。</p></div><h3 id="menuprops" tabindex="-1"><a class="header-anchor" href="#menuprops" aria-hidden="true">#</a> menuProps</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"><a class="header-anchor" href="#sidewidth" aria-hidden="true">#</a> sideWidth</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"><a class="header-anchor" href="#rendercustom" aria-hidden="true">#</a> renderCustom</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"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3>',8),an=a("<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>",3),en=n("p",null,[n("strong",null,"参数")],-1),tn=n("li",null,"router：createRouter 创建的路由实例",-1),on=n("li",null,"to： 准备进入的路由",-1),pn=n("li",null,"from：离开的路由",-1),ln={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:"noopener noreferrer"},cn=a(`<p>比如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> to<span class="token punctuation">,</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">&#39;/404&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;/404&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">&#39;/404&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&#39;/403&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;/403&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">&#39;/403&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3>`,3),un=a("<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>",3),rn=n("p",null,[n("strong",null,"参数")],-1),dn=n("li",null,"router：createRouter 创建的路由实例",-1),kn=n("li",null,"to： 准备进入的路由",-1),vn=n("li",null,"from：离开的路由",-1),gn={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:"noopener noreferrer"},hn=a(`<p>比如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&#39;/404&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;/404&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">&#39;/404&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="usetabtitle" tabindex="-1"><a class="header-anchor" href="#usetabtitle" aria-hidden="true">#</a> useTabTitle</h3><p>类型定义如下：</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">useTabTitle</span><span class="token punctuation">(</span>title<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> Ref<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>当使用多页签模式时，在页面中使用 <code>useTabTitle</code> 可以自定义页面标签：</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> useRoute<span class="token punctuation">,</span> useTabTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> titleRef <span class="token operator">=</span> <span class="token function">useTabTitle</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">详情-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>route<span class="token punctuation">.</span>params<span class="token operator">?.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//如果要更新</span>
titleRef<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">&#39;changed&#39;</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-x-升级到-5-x" tabindex="-1"><a class="header-anchor" href="#_4-x-升级到-5-x" aria-hidden="true">#</a> 4.x 升级到 5.x</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>`,10);function mn(p,bn){const t=c("RouterLink"),i=c("ExternalLinkIcon");return r(),d("div",null,[v,g,h,n("ul",null,[m,n("li",null,[s("搭配 "),e(t,{to:"/reference/plugin/plugins/access.html"},{default:o(()=>[s("@fesjs/plugin-access")]),_:1}),s(" 插件使用，可以完成对路由的权限控制。")]),n("li",null,[s("搭配 "),e(t,{to:"/reference/plugin/plugins/locale.html"},{default:o(()=>[s("@fesjs/plugin-locale")]),_:1}),s(" 插件使用，提供切换语言的能力。")]),b,f,_,x]),y,l(" ![side](/side.png) "),n("img",{src:p.$withBase("side.png"),alt:"side"},null,8,j),w,l(" ![top](/top.png) "),n("img",{src:p.$withBase("top.png"),alt:"top"},null,8,A),E,l(" ![mixin](/mixin.png) "),n("img",{src:p.$withBase("mixin.png"),alt:"mixin"},null,8,B),F,l(" ![mixin](/mixin.png) "),n("img",{src:p.$withBase("left-right.png"),alt:"left-right"},null,8,C),R,n("p",null,[s("支持配置页面缓存，通过"),e(t,{to:"/guide/route.html#%E6%89%A9%E5%B1%95%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF"},{default:o(()=>[s("定义路由元信息")]),_:1}),s("开启缓存：")]),q,n("ul",null,[S,n("li",null,[n("p",null,[T,s("：默认为 "),e(t,{to:"/reference/config/#title"},{default:o(()=>[s("编译时配置 title")]),_:1})])]),H]),I,n("ul",null,[P,N,n("li",null,[V,L,n("ul",null,[n("li",null,[n("p",null,[$,s("：菜单的名称。通过匹配 "),M,s(" 和路由元信息 "),e(t,{to:"/guide/route.html#%E6%89%A9%E5%B1%95%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF"},{default:o(()=>[s("meta")]),_:1}),s(" 中的 "),U,s("，把菜单和路由关联起来，\b 然后使用路由元信息补充菜单配置，比如 "),z,s("、"),D,s(" \b 等。")])]),K,n("li",null,[O,n("ul",null,[n("li",null,[n("p",null,[s("如果同时使用"),e(t,{to:"/reference/plugin/plugins/locale.html"},{default:o(()=>[s("国际化插件")]),_:1}),s("，而且"),W,s("的值以"),G,s("开头，则使用"),J,s("后面的内容去匹配语言设置。")])]),Q])]),n("li",null,[X,n("ul",null,[n("li",null,[n("p",null,[s("图标使用"),n("a",Y,[s("fes-design icon"),e(i)]),s("，编译时配置使用组件名称，我们会自动引入组件。")])]),Z])]),nn])])]),sn,n("ul",null,[an,n("li",null,[en,n("ul",null,[tn,on,pn,n("li",null,[s("next： "),n("a",ln,[s("next 函数"),e(i)])])])])]),cn,n("ul",null,[un,n("li",null,[rn,n("ul",null,[dn,kn,vn,n("li",null,[s("next： "),n("a",gn,[s("next 函数"),e(i)])])])])]),hn])}const _n=u(k,[["render",mn],["__file","layout.html.vue"]]);export{_n as default};