blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity
fes.js/reference/plugin/plugins/layout.html

133 lines
63 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="VuePress 2.0.0-beta.28">
<link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-layout | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案">
<link rel="preload" href="fes.js/assets/js/runtime~app.8bc5b0d2.js" as="script"><link rel="preload" href="fes.js/assets/css/styles.6322d7ca.css" as="style"><link rel="preload" href="fes.js/assets/js/519.22262c34.js" as="script"><link rel="preload" href="fes.js/assets/js/app.accad1eb.js" as="script">
<link rel="stylesheet" href="fes.js/assets/css/styles.6322d7ca.css">
</head>
<body>
<div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="版本"><span class="title">版本</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="版本"><span class="title">版本</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/next" rel="noopener noreferrer" target="_blank" aria-label="next(3.0)"><!--[--><!--]--> next(3.0) <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="1.0"><!--[--><!--]--> 1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="版本"><span class="title">版本</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="版本"><span class="title">版本</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/next" rel="noopener noreferrer" target="_blank" aria-label="next(3.0)"><!--[--><!--]--> next(3.0) <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="1.0"><!--[--><!--]--> 1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#布局类型" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="布局类型"><!--[--><!--]--> 布局类型 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#side" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="side"><!--[--><!--]--> side <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#top" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="top"><!--[--><!--]--> top <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#mixin" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="mixin"><!--[--><!--]--> mixin <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#页面禁用布局" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="页面禁用布局"><!--[--><!--]--> 页面禁用布局 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#keep-alive" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="keep-alive"><!--[--><!--]--> keep-alive <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#编译时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#footer" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="footer"><!--[--><!--]--> footer <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#theme" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="theme"><!--[--><!--]--> theme <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#navigation" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="navigation"><!--[--><!--]--> navigation <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#fixedheader" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="fixedHeader"><!--[--><!--]--> fixedHeader <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#fixedsidebar" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="fixedSideBar"><!--[--><!--]--> fixedSideBar <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#title" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="title"><!--[--><!--]--> title <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#logo" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="logo"><!--[--><!--]--> logo <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#multitabs" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="multiTabs"><!--[--><!--]--> multiTabs <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#menus" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="menus"><!--[--><!--]--> menus <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#menusconfig" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="menusConfig"><!--[--><!--]--> menusConfig <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#运行时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#menus-1" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="menus"><!--[--><!--]--> menus <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#header" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="header"><!--[--><!--]--> header <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#sidebar" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="sidebar"><!--[--><!--]--> sidebar <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#logo-1" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="logo"><!--[--><!--]--> logo <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#customheader" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="customHeader"><!--[--><!--]--> customHeader <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#unaccesshandler" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="unAccessHandler"><!--[--><!--]--> unAccessHandler <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#nofoundhandler" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="noFoundHandler"><!--[--><!--]--> noFoundHandler <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#logourl" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="logoUrl"><!--[--><!--]--> logoUrl <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#其他运行时配置-4-1-0" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="其他运行时配置 (&gt; 4.1.0)"><!--[--><!--]--> 其他运行时配置 (&gt; 4.1.0) <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-layout" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-layout" aria-hidden="true">#</a> @fesjs/plugin-layout</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>为了进一步降低研发成本，我们尝试将布局通过 fes 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。</p><ul><li><p>侧边栏菜单数据根据路由中的配置自动生成。</p></li><li><p>布局，提供 <code>side</code>、 <code>top</code>、<code>mixin</code> 三种布局。</p></li><li><p>主题，提供 <code>light</code>、<code>dark</code> 两种主题。</p></li><li><p>默认实现对路由的 404、403 处理。</p></li><li><p>搭配 <a href="/fes.js/reference/plugin/plugins/access.html" class="">@fesjs/plugin-access</a> 插件使用，可以完成对路由的权限控制。</p></li><li><p>搭配 <a href="/fes.js/reference/plugin/plugins/locale.html" class="">@fesjs/plugin-locale</a> 插件使用，提供切换语言的能力。</p></li><li><p>支持自定义头部区域。</p></li><li><p>菜单支持配置icon</p></li><li><p>菜单标题支持国际化</p></li><li><p>可配置页面是否需要 layout。</p></li></ul><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json ext-json line-numbers-mode"><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;^2.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;^4.0.0&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></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>side</code>：</p><div class="language-javascript ext-js line-numbers-mode"><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 literal-property property">navigation</span><span class="token operator">:</span> <span class="token string">&#39;side&#39;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="side" tabindex="-1"><a class="header-anchor" href="#side" aria-hidden="true">#</a> side</h3><img src="fes.js/side.png" alt="side"><h3 id="top" tabindex="-1"><a class="header-anchor" href="#top" aria-hidden="true">#</a> top</h3><img src="fes.js/top.png" alt="top"><h3 id="mixin" tabindex="-1"><a class="header-anchor" href="#mixin" aria-hidden="true">#</a> mixin</h3><img src="fes.js/mixin.png" alt="mixin"><h3 id="页面禁用布局" tabindex="-1"><a class="header-anchor" href="#页面禁用布局" aria-hidden="true">#</a> 页面禁用布局</h3><p>布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的<code>.vue</code>中添加如下配置：</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>config</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
{
&quot;layout&quot;: false
}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>config</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>如果只是不想展示<code>sidebar</code>，则：</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>&lt;config lang=&quot;json&quot;&gt;
{
&quot;layout&quot;: {
&quot;sidebar&quot;: false
}
}
&lt;/config&gt;
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><code>layout</code>的可选配置有：</p><ul><li><p><strong>sidebar</strong>： 左侧区域，从v4.0.0开始，之前名称叫<code>side</code></p></li><li><p><strong>header</strong>： 头部区域，从v4.0.0开始，之前名称叫<code>top</code></p></li><li><p><strong>logo</strong>：logo和标题区域。</p></li></ul><h2 id="keep-alive" tabindex="-1"><a class="header-anchor" href="#keep-alive" aria-hidden="true">#</a> keep-alive</h2><p>从 4.0.7 开始支持配置路由页面缓存：</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>&lt;config lang=&quot;json&quot;&gt;
{
&quot;keep-alive&quot;: true
}
&lt;/config&gt;
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在 <code>.fes.js</code> 中配置：</p><div class="language-javascript ext-js line-numbers-mode"><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 comment">// 是否开启 tabs</span>
<span class="token literal-property property">multiTabs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token comment">// 布局类型</span>
<span class="token literal-property property">navigation</span><span class="token operator">:</span> <span class="token string">&#39;side&#39;</span><span class="token punctuation">,</span>
<span class="token comment">// 是否固定头部</span>
<span class="token literal-property property">fixedHeader</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token comment">// 是否固定sidebar</span>
<span class="token literal-property property">fixedSideBar</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token comment">// sidebar的宽度</span>
<span class="token literal-property property">sideWidth</span><span class="token operator">:</span> <span class="token number">200</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 literal-property property">menuConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">defaultExpandAll</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">expandedKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">accordion</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><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="fixedheader" tabindex="-1"><a class="header-anchor" href="#fixedheader" aria-hidden="true">#</a> fixedHeader</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="fixedsidebar" tabindex="-1"><a class="header-anchor" href="#fixedsidebar" aria-hidden="true">#</a> fixedSideBar</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><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>name</code> in package.json</p></li><li><p><strong>详情</strong>：产品名，会显示在 Logo 旁边。</p></li></ul><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>：默认提供 fes.js 的 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><ul><li><p><strong>类型</strong>：<code>Array</code></p></li><li><p><strong>默认值</strong>：<code>[]</code></p></li><li><p><strong>详情</strong>：菜单配置，子项具体配置如下：</p><ul><li><p><strong>name</strong>：菜单的名称。通过匹配 <code>name</code> 和路由元信息 <a href="/fes.js/guide/route.html#%E6%89%A9%E5%B1%95%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF" class="">meta</a> 中的 <code>name</code>，把菜单和路由关联起来，然后使用路由元信息补充菜单配置，比如 <code>title</code>、<code>path</code> 等。</p></li><li><p><strong>path</strong>：菜单的路径，可配置第三方地址。</p></li><li><p><strong>match</strong>：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）</p></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>{
path: &#39;/product&#39;,
match: [&#39;/product/*&#39;, &#39;/product/create&#39;]
}
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li><p><strong>title</strong>：菜单的标题，如果同时使用<a href="/fes.js/reference/plugin/plugins/locale.html" class="">国际化插件</a>，而且<code>title</code>的值以<code>$</code>开头，则使用<code>$</code>后面的内容去匹配语言设置。</p></li><li><p><strong>icon</strong>: 菜单的图标，只有一级标题展示图标。</p><ul><li>图标使用<a href="https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html" target="_blank" rel="noopener noreferrer">fes-design icon<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>，在这里使用组件名称。</li></ul></li></ul><div class="language-javascript ext-js line-numbers-mode"><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">&quot;AppstoreOutlined&quot;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><pre><code>- 图标使用本地或者远程svg图片。
</code></pre><div class="language-javascript ext-js line-numbers-mode"><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">&quot;/wine-outline.svg&quot;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li><strong>children</strong>：子菜单配置。</li></ul><h3 id="menusconfig" tabindex="-1"><a class="header-anchor" href="#menusconfig" aria-hidden="true">#</a> menusConfig</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><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><p>在 <code>app.js</code> 中配置：</p><div class="language-javascript ext-js line-numbers-mode"><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 literal-property property">customHeader</span><span class="token operator">:</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 punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="menus-1" tabindex="-1"><a class="header-anchor" href="#menus-1" aria-hidden="true">#</a> menus</h3><ul><li><p><strong>类型</strong>：<code>(defaultMenus: [] )=&gt; Ref | []</code></p></li><li><p><strong>详情</strong>：运行时修改菜单，入参是默认菜单配置（.fes.js中的menu配置），需要返回一个<code>Ref</code>或者数组。</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ClusterOutlined <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes-design/icon&#39;</span>
<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 parameter">layoutConfig</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token operator">...</span>layoutConfig<span class="token punctuation">,</span>
<span class="token literal-property property">customHeader</span><span class="token operator">:</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 parameter">defaultMenuData</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>defaultMenuData<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> layoutConfig<span class="token punctuation">.</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 literal-property property">icon</span><span class="token operator">:</span> <span class="token operator">&lt;</span>ClusterOutlined <span class="token operator">/</span><span class="token operator">&gt;</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>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><code>layoutConfig.initialState</code> 是 <code>beforeRender.action</code>执行后创建的应用初始状态数据。</p><p>如果菜单需要根据某些状态动态改变，则返回<code>Ref</code>，否则只需要返回数组。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在运行时配置菜单中的icon，需要传组件本身，而不是组件的名称。</p></div><h3 id="header" tabindex="-1"><a class="header-anchor" href="#header" aria-hidden="true">#</a> header</h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>true</code></p></li><li><p><strong>详情</strong>：是否显示 header 区域。</p></li></ul><h3 id="sidebar" tabindex="-1"><a class="header-anchor" href="#sidebar" aria-hidden="true">#</a> sidebar</h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>true</code></p></li><li><p><strong>详情</strong>：是否显示 sidebar 区域。</p></li></ul><h3 id="logo-1" tabindex="-1"><a class="header-anchor" href="#logo-1" aria-hidden="true">#</a> logo</h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：<code>true</code></p></li><li><p><strong>详情</strong>：是否显示 logo 区域。</p></li></ul><h3 id="customheader" tabindex="-1"><a class="header-anchor" href="#customheader" aria-hidden="true">#</a> customHeader</h3><ul><li><p><strong>类型</strong>：Vue Component</p></li><li><p><strong>默认值</strong>：<code>null</code></p></li><li><p><strong>详情</strong>：top的区域部分位置提供组件自定义功能。</p></li></ul><h3 id="unaccesshandler" tabindex="-1"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3><ul><li><p><strong>类型</strong>：<code>Function</code></p></li><li><p><strong>默认值</strong>：<code>null</code></p></li><li><p><strong>详情</strong>：</p><p>当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 <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="noopener noreferrer">next函数<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li></ul></li></ul><p>比如：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <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>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3><ul><li><p><strong>类型</strong>：函数</p></li><li><p><strong>默认值</strong>：null</p></li><li><p><strong>详情</strong>：</p><p>当进入某个路由时，如果路由对应的页面不存在，则会调用 <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="noopener noreferrer">next函数<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li></ul></li></ul><p>比如：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <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>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="logourl" tabindex="-1"><a class="header-anchor" href="#logourl" aria-hidden="true">#</a> logoUrl</h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：默认提供 fes.js 的 Logo</p></li><li><p><strong>详情</strong>：Logo的链接。</p></li></ul><h3 id="其他运行时配置-4-1-0" tabindex="-1"><a class="header-anchor" href="#其他运行时配置-4-1-0" aria-hidden="true">#</a> 其他运行时配置 (&gt; 4.1.0)</h3><p>编译时配置的内容同样支持在运行时配置，但是<code>logo</code>除外，用<code>logoUrl</code>替代。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/vue3/docs/reference/plugin/plugins/layout.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div>
<script src="fes.js/assets/js/runtime~app.8bc5b0d2.js" defer></script><script src="fes.js/assets/js/519.22262c34.js" defer></script><script src="fes.js/assets/js/app.accad1eb.js" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink