blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 19:41:57 +08:00
Code Issues Projects Releases Wiki Activity
fes.js/guide/route.html

180 lines
83 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="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>路由 | Fes.js</title>
<meta name="description" content="一个好用的前端应用解决方案">
<link rel="preload stylesheet" href="/fes.js/assets/style.4a63a91b.css" as="style">
<script type="module" src="/fes.js/assets/app.2bf1349f.js"></script>
<link rel="preload" href="/fes.js/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/fes.js/assets/chunks/framework.b31a4d00.js">
<link rel="modulepreload" href="/fes.js/assets/chunks/theme.efc1de3f.js">
<link rel="modulepreload" href="/fes.js/assets/guide_route.md.11dd4240.lean.js">
<link rel="icon" href="/logo.png">
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-c74291a9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-11226aa0></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-11226aa0> Skip to content </a><!--]--><!----><header class="VPNav" data-v-c74291a9 data-v-c74e2951><div class="VPNavBar has-sidebar" data-v-c74e2951 data-v-3d8ab908><div class="container" data-v-3d8ab908><div class="title" data-v-3d8ab908><div class="VPNavBarTitle has-sidebar" data-v-3d8ab908 data-v-e189ae0c><a class="title" href="/fes.js/" data-v-e189ae0c><!--[--><!--]--><!--[--><img class="VPImage logo" src="/fes.js/logo.png" alt data-v-b9e17fa4><!--]--><!--[-->Fes.js<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-3d8ab908><div class="curtain" data-v-3d8ab908></div><div class="content-body" data-v-3d8ab908><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-3d8ab908><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-3d8ab908 data-v-3f9f1003><span id="main-nav-aria-label" class="visually-hidden" data-v-3f9f1003>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/fes.js/guide/" tabindex="0" data-v-3f9f1003 data-v-3417cce8 data-v-035e7ba4><!--[-->指南<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/config/" tabindex="0" data-v-3f9f1003 data-v-3417cce8 data-v-035e7ba4><!--[-->编译时配置<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/api/" tabindex="0" data-v-3f9f1003 data-v-3417cce8 data-v-035e7ba4><!--[-->API<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/plugin/" tabindex="0" data-v-3f9f1003 data-v-3417cce8 data-v-035e7ba4><!--[-->插件<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/cli/index.html" tabindex="0" data-v-3f9f1003 data-v-3417cce8 data-v-035e7ba4><!--[-->CLI<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-3f9f1003 data-v-7e9a1097><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-7e9a1097><span class="text" data-v-7e9a1097><!----> v3.4.6 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-7e9a1097><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-7e9a1097><div class="VPMenu" data-v-7e9a1097 data-v-b9be57d1><div class="items" data-v-b9be57d1><!--[--><!--[--><div class="VPMenuLink" data-v-b9be57d1 data-v-aadfa0cc><a class="VPLink link" href="https://fesjs.mumblefe.cn/2.0/" target="_blank" rel="noreferrer" data-v-aadfa0cc data-v-035e7ba4><!--[-->v2.0<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-035e7ba4><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b9be57d1 data-v-aadfa0cc><a class="VPLink link" href="https://fesjs.mumblefe.cn/1.0/" target="_blank" rel="noreferrer" data-v-aadfa0cc data-v-035e7ba4><!--[-->v1.0<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-035e7ba4><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-3f9f1003 data-v-7e9a1097><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-7e9a1097><span class="text" data-v-7e9a1097><!----> 了解更多 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-7e9a1097><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-7e9a1097><div class="VPMenu" data-v-7e9a1097 data-v-b9be57d1><div class="items" data-v-b9be57d1><!--[--><!--[--><div class="VPMenuLink" data-v-b9be57d1 data-v-aadfa0cc><a class="VPLink link" href="https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-aadfa0cc data-v-035e7ba4><!--[-->更新日志<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-035e7ba4><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b9be57d1 data-v-aadfa0cc><a class="VPLink link" href="http://fes-design.mumblefe.cn/" target="_blank" rel="noreferrer" data-v-aadfa0cc data-v-035e7ba4><!--[-->fes-design<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-035e7ba4><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-3d8ab908 data-v-57b3b443><label title="toggle dark mode" data-v-57b3b443 data-v-d27e0b3e><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-d27e0b3e data-v-397f7bd3><span class="check" data-v-397f7bd3><span class="icon" data-v-397f7bd3><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d27e0b3e><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d27e0b3e><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-3d8ab908 data-v-632bbf2a data-v-eb6c55bf><!--[--><a class="VPSocialLink" href="https://github.com/WeBankFinTech/fes.js" aria-label="github" target="_blank" rel="noopener" data-v-eb6c55bf data-v-36e7150a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-3d8ab908 data-v-479e3dea data-v-7e9a1097><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-7e9a1097><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-7e9a1097><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-7e9a1097><div class="VPMenu" data-v-7e9a1097 data-v-b9be57d1><!----><!--[--><!--[--><!----><div class="group" data-v-479e3dea><div class="item appearance" data-v-479e3dea><p class="label" data-v-479e3dea>Appearance</p><div class="appearance-action" data-v-479e3dea><label title="toggle dark mode" data-v-479e3dea data-v-d27e0b3e><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-d27e0b3e data-v-397f7bd3><span class="check" data-v-397f7bd3><span class="icon" data-v-397f7bd3><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d27e0b3e><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d27e0b3e><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div></div></div><div class="group" data-v-479e3dea><div class="item social-links" data-v-479e3dea><div class="VPSocialLinks social-links-list" data-v-479e3dea data-v-eb6c55bf><!--[--><a class="VPSocialLink" href="https://github.com/WeBankFinTech/fes.js" aria-label="github" target="_blank" rel="noopener" data-v-eb6c55bf data-v-36e7150a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-3d8ab908 data-v-800f602f><span class="container" data-v-800f602f><span class="top" data-v-800f602f></span><span class="middle" data-v-800f602f></span><span class="bottom" data-v-800f602f></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-c74291a9 data-v-1c6a0f8c><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-1c6a0f8c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-1c6a0f8c><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-1c6a0f8c>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-1c6a0f8c data-v-fdf147c8><button data-v-fdf147c8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-c74291a9 data-v-f8b70c20><div class="curtain" data-v-f8b70c20></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-f8b70c20><span class="visually-hidden" id="sidebar-aria-label" data-v-f8b70c20> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-f8b70c20><section class="VPSidebarItem level-0" data-v-f8b70c20 data-v-a0c168fa><div class="item" role="button" tabindex="0" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><h2 class="text" data-v-a0c168fa>开始</h2><!----></div><div class="items" data-v-a0c168fa><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/index.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>介绍</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/getting-started.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>快速上手</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-f8b70c20><section class="VPSidebarItem level-0 has-active" data-v-f8b70c20 data-v-a0c168fa><div class="item" role="button" tabindex="0" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><h2 class="text" data-v-a0c168fa>基础</h2><!----></div><div class="items" data-v-a0c168fa><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/directory-structure.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>目录结构</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/builder.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>Vite 和 Webpack 双构建</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/config.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>编译时配置</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/runtime-config.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>运行时配置</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/env.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>环境变量</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/route.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>路由</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/plugin.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>插件</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/template.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>HTML 模板</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/mock.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>Mock 数据</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/upgrade3.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>从 2.x 迁移到 3.x</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-f8b70c20><section class="VPSidebarItem level-0" data-v-f8b70c20 data-v-a0c168fa><div class="item" role="button" tabindex="0" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><h2 class="text" data-v-a0c168fa>样式和资源文件</h2><!----></div><div class="items" data-v-a0c168fa><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/image.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>使用图片</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/css.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>使用 css</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/public.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>静态资源</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-f8b70c20><section class="VPSidebarItem level-0" data-v-f8b70c20 data-v-a0c168fa><!----><div class="items" data-v-a0c168fa><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/contributing.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>贡献指南</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/faq.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>常见问题</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-c74291a9 data-v-d746c125><div class="VPDoc has-sidebar has-aside" data-v-d746c125 data-v-9702f3ec><!--[--><!--]--><div class="container" data-v-9702f3ec><div class="aside" data-v-9702f3ec><div class="aside-curtain" data-v-9702f3ec></div><div class="aside-container" data-v-9702f3ec><div class="aside-content" data-v-9702f3ec><div class="VPDocAside" data-v-9702f3ec data-v-7acd232e><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-7acd232e data-v-ec56e3d5><div class="content" data-v-ec56e3d5><div class="outline-marker" data-v-ec56e3d5></div><div class="outline-title" data-v-ec56e3d5>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ec56e3d5><span class="visually-hidden" id="doc-outline-aria-label" data-v-ec56e3d5> Table of Contents for current page </span><ul class="root" data-v-ec56e3d5 data-v-afdbde2c><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-7acd232e></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9702f3ec><div class="content-container" data-v-9702f3ec><!--[--><!--]--><!----><main class="main" data-v-9702f3ec><div style="position:relative;" class="vp-doc _fes_js_guide_route" data-v-9702f3ec><div><h1 id="路由" tabindex="-1">路由 <a class="header-anchor" href="#路由" aria-label="Permalink to &quot;路由&quot;">​</a></h1><p>像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 <code>Vue Router</code> 实现的路由，想了解更多的同学可以看看<a href="https://next.router.vuejs.org/" target="_blank" rel="noreferrer">官方文档</a>。</p><h2 id="路由配置" tabindex="-1">路由配置 <a class="header-anchor" href="#路由配置" aria-label="Permalink to &quot;路由配置&quot;">​</a></h2><p>在配置文件 <code>.fes.js</code>中通过 <code>router</code> 进行配置。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">router</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">routes</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> []</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mode</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hash</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="routes" tabindex="-1">routes <a class="header-anchor" href="#routes" aria-label="Permalink to &quot;routes&quot;">​</a></h3><p><code>routes</code> 是配置添加到路由的初始路由列表，格式为路由信息的数组。具体使用参考 <a href="https://next.router.vuejs.org/zh/guide/" target="_blank" rel="noreferrer">Vue Router 文档</a> 中关于路由配置、路由匹配相关内容。</p><h3 id="mode" tabindex="-1">mode <a class="header-anchor" href="#mode" aria-label="Permalink to &quot;mode&quot;">​</a></h3><p>创建历史记录的类型：</p><ul><li><strong>history</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createwebhistory" target="_blank" rel="noreferrer">createWebHistory</a></li><li><strong>hash</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noreferrer">createWebHashHistory</a></li><li><strong>memory</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noreferrer">createMemoryHistory</a></li></ul><p>默认是<code>hash</code>模式。</p><h2 id="约定式路由" tabindex="-1">约定式路由 <a class="header-anchor" href="#约定式路由" aria-label="Permalink to &quot;约定式路由&quot;">​</a></h2><p>约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。</p><h3 id="约定规范" tabindex="-1">约定规范 <a class="header-anchor" href="#约定规范" aria-label="Permalink to &quot;约定规范&quot;">​</a></h3><p>比如以下文件结构：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">pages</span></span>
<span class="line"><span style="color:#babed8;">├── index.vue # 根路由页面 路径为 /</span></span>
<span class="line"><span style="color:#babed8;">├── [...slug].vue # 模糊匹配 路径为 /:slug(.*)</span></span>
<span class="line"><span style="color:#babed8;">├── a.vue # 路径 /a</span></span>
<span class="line"><span style="color:#babed8;">├── b # 文件夹b</span></span>
<span class="line"><span style="color:#babed8;">│ ├── index.vue # 路径 /b</span></span>
<span class="line"><span style="color:#babed8;">│ ├── [slug].vue # 动态路由 /b/:slug</span></span>
<span class="line"><span style="color:#babed8;">│ ├── c.vue # 路径 /b/c</span></span>
<span class="line"><span style="color:#babed8;">│ └── layout.vue # /b 路径下所有页面公共的布局组件</span></span>
<span class="line"><span style="color:#babed8;">└── layout.vue # 根路由下所有页面共用的布局组件</span></span></code></pre></div><p>编译后会得到以下路由配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">[</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/layout</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">7</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/b/layout</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">7</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/b/c</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/b/c</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b_c</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">14</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/b/:id</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/b/@id</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b__id</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">13</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/b</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/b/index</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">b_index</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">7</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/index</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/:pathMatch(.*)</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/*</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">FUZZYMATCH</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p><strong>需要注意的是，满足以下任意规则的文件不会被注册为路由</strong>：</p><ul><li>不是 <code>.vue .jsx</code> 文件</li><li><code>components</code> 目录中的文件</li></ul><h3 id="动态路由" tabindex="-1">动态路由 <a class="header-anchor" href="#动态路由" aria-label="Permalink to &quot;动态路由&quot;">​</a></h3><p>Fes.js 里约定名称为 <code>[slug]</code>格式的文件或文件夹映射为动态路由。 比如：</p><ul><li><code>src/pages/users/[id].vue</code> 会成为 <code>/users/:id</code></li><li><code>src/pages/users/[id]/settings.vue</code> 会成为 <code>/users/:id/settings</code></li></ul><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><code>@slug</code>形式下版本会弃用，请替换为<code>[slug]</code>~</p></div><h3 id="模糊匹配" tabindex="-1">模糊匹配 <a class="header-anchor" href="#模糊匹配" aria-label="Permalink to &quot;模糊匹配&quot;">​</a></h3><p>Fes.js 里约定名称为 <code>[...slug]</code>格式的文件或文件夹映射为动态路由中的模糊匹配形式。 比如：</p><ul><li><code>src/pages/users/[...].vue</code> 会成为 <code>/users/:pathMatch(.*)</code></li><li><code>src/pages/users/[...id].vue</code> 会成为 <code>/users/:id(.*)</code></li><li><code>src/pages/users/[...id]/settings.vue</code> 会成为 <code>/users/:id(.*)/settings</code></li></ul><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><code>*</code>形式下版本会弃用，请替换为<code>[...slug]</code>~</p></div><h3 id="嵌套路由" tabindex="-1">嵌套路由 <a class="header-anchor" href="#嵌套路由" aria-label="Permalink to &quot;嵌套路由&quot;">​</a></h3><p>Fes.js 里约定目录下有 <code>layout.vue</code> 时会生成嵌套路由，以 <code>layout.vue</code> 为该目录的公共父组件，<code>layout.vue</code> 中必须实现 <code>RouterView</code></p><p>比如以下目录结构：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">pages</span></span>
<span class="line"><span style="color:#babed8;">└── users</span></span>
<span class="line"><span style="color:#babed8;"> ├── layout.vue</span></span>
<span class="line"><span style="color:#babed8;"> ├── index.vue</span></span>
<span class="line"><span style="color:#babed8;"> └── list.vue</span></span></code></pre></div><p>会生成路由：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">[</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/users</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/users/layout</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/users</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/users/index</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/users/list</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/users/list</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="模糊匹配-1" tabindex="-1">模糊匹配 <a class="header-anchor" href="#模糊匹配-1" aria-label="Permalink to &quot;模糊匹配&quot;">​</a></h3><p>Fes.js 下约定文件名为 <code>*</code> 的路由是模糊匹配路由，可以用此特性实现 <a href="https://next.router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E8%B7%AF%E7%94%B1%E6%88%96-404-not-found-%E8%B7%AF%E7%94%B1" target="_blank" rel="noreferrer">404 路由</a>。</p><p>比如以下目录结构：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">pages</span></span>
<span class="line"><span style="color:#babed8;">├── index.vue # 根路由页面 路径为 /</span></span>
<span class="line"><span style="color:#babed8;">└── *.vue # 模糊匹配 路径为 *</span></span></code></pre></div><p>会生成路由：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">[</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/index</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/:pathMatch(.*)</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/**</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>这样，如果访问 <code>/foo</code>，<code>/</code> 不能匹配，会 fallback 到 <code>*</code> 路由，通过 <code>src/pages/*.vue</code> 进行渲染。</p><h3 id="智能路由" tabindex="-1">智能路由 <a class="header-anchor" href="#智能路由" aria-label="Permalink to &quot;智能路由&quot;">​</a></h3><p>可以看到，编译后路由都会有 <code>count</code> 属性，这是我们根据精准匹配优先算法原则设计出路由排名算法，对匹配到的路由打分：</p><ul><li>路由的路径每个子项得到 4 分</li><li>子项为静态细分(<code>/list</code>)再加 3 分</li><li>子项为动态细分（<code>/:orderId</code>）再加 2 分</li><li>根段(<code>/</code>)再 1 分</li><li>通配符(<code>*</code>)匹配到的减去 1 分</li></ul><p>当我们跳转路由时，如果 URL 匹配到多个路由，则选择分数最高的路由。</p><h2 id="扩展路由元信息" tabindex="-1">扩展路由元信息 <a class="header-anchor" href="#扩展路由元信息" aria-label="Permalink to &quot;扩展路由元信息&quot;">​</a></h2><p>我们在定义路由时可以配置<code>meta</code>字段，用来记录一些跟路由相关的信息：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> router </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">new</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">VueRouter</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">routes</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/foo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> Foo</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> Bar</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// a meta field</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">requiresAuth</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>我们使用<code>defineRouteMeta</code> 配置 <code>meta</code>：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">defineRouteMeta</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#82AAFF;">defineRouteMeta</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vuex测试</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>当然在单文件组件中，还可以通过<code>&lt;config&gt;&lt;/config&gt;</code>配置 <code>meta</code>：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">config</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;">{</span></span>
<span class="line"><span style="color:#BABED8;"> &quot;name&quot;: &quot;store&quot;,</span></span>
<span class="line"><span style="color:#BABED8;"> &quot;title&quot;: &quot;vuex测试&quot;</span></span>
<span class="line"><span style="color:#BABED8;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">config</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>推荐使用<code>defineRouteMeta</code>，有更好的提示。</p></div><p>路由元信息在编译后会附加到路由配置中：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight has-highlighted-lines"><code><span class="line"><span style="color:#BABED8;">[</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/pages/a</span><span style="color:#89DDFF;">&#39;</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
<span class="line highlighted"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line highlighted"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line highlighted"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vuex测试</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line highlighted"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#BABED8;">]</span></span></code></pre></div><h2 id="路由跳转" tabindex="-1">路由跳转 <a class="header-anchor" href="#路由跳转" aria-label="Permalink to &quot;路由跳转&quot;">​</a></h2><p>想学习更多，可以查看 <a href="https://next.router.vuejs.org/zh/guide/essentials/navigation.html#%E6%9B%BF%E6%8D%A2%E5%BD%93%E5%89%8D%E4%BD%8D%E7%BD%AE" target="_blank" rel="noreferrer">Vue Router 官方文档</a>。</p><h3 id="声明式" tabindex="-1">声明式 <a class="header-anchor" href="#声明式" aria-label="Permalink to &quot;声明式&quot;">​</a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">to</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/home</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#BABED8;">Home</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="命令式" tabindex="-1">命令式 <a class="header-anchor" href="#命令式" aria-label="Permalink to &quot;命令式&quot;">​</a></h3><p>页面跳转 API 由 <code>router</code> 实例提供，查看 <a href="https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95" target="_blank" rel="noreferrer">Vue Rouer 文档</a>了解更多。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRouter</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 这三种形式是等价的</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/users/posva#bio</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> path</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/users/posva</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> hash</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#bio</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">users</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> params</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> username</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">posva</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> hash</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#bio</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 只改变 hash</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> hash</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#bio</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 只改变 query</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> query</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> page</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 只改变 param</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> params</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> username</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">jolyne</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 跳转到上一个路由</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">goBack</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 跳转到前一个历史记录</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">go</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 替换历史堆栈中的记录</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/new</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-9702f3ec data-v-0b6073ff><!--[--><!--]--><!----><div class="prev-next" data-v-0b6073ff><div class="pager" data-v-0b6073ff><a class="pager-link prev" href="/fes.js/guide/env.html" data-v-0b6073ff><span class="desc" data-v-0b6073ff>Previous page</span><span class="title" data-v-0b6073ff>环境变量</span></a></div><div class="has-prev pager" data-v-0b6073ff><a class="pager-link next" href="/fes.js/guide/plugin.html" data-v-0b6073ff><span class="desc" data-v-0b6073ff>Next page</span><span class="title" data-v-0b6073ff>插件</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-c74291a9 data-v-12cd1677><div class="container" data-v-12cd1677><p class="message" data-v-12cd1677>Released under the MIT License.</p><p class="copyright" data-v-12cd1677>Copyright © 2020-present Webank</p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_plugin.md\":\"7d7f4c03\",\"guide_image.md\":\"2e74f65f\",\"guide_css.md\":\"db5fc79d\",\"guide_public.md\":\"84526512\",\"guide_builder.md\":\"7aef2181\",\"guide_getting-started.md\":\"3b0150f9\",\"guide_contributing.md\":\"8666fd37\",\"guide_directory-structure.md\":\"f0919b75\",\"reference_plugin_plugins_swc.md\":\"f887c1f1\",\"reference_plugin_plugins_sass.md\":\"aea91d6e\",\"reference_plugin_plugins_windicss.md\":\"8deb5ce9\",\"reference_plugin_index.md\":\"ee42a061\",\"reference_plugin_plugins_jest.md\":\"d574f7ac\",\"reference_plugin_plugins_login.md\":\"c4b18ed3\",\"reference_plugin_plugins_pinia.md\":\"c7ff2416\",\"reference_plugin_plugins_model.md\":\"ef7fdf24\",\"guide_index.md\":\"d93ea205\",\"reference_plugin_dev_index.md\":\"1a7b2210\",\"reference_cli_index.md\":\"70d79c65\",\"guide_faq.md\":\"79254e2b\",\"reference_plugin_plugins_editor.md\":\"59115d8d\",\"guide_config.md\":\"62eccd9f\",\"reference_plugin_plugins_access.md\":\"ba03251a\",\"reference_plugin_dev_api.md\":\"2d7e42be\",\"reference_api_index.md\":\"72b9ecff\",\"reference_api.md\":\"5e62d83f\",\"guide_upgrade3.md\":\"3bcfb370\",\"index.md\":\"5e78095f\",\"guide_mock.md\":\"8a0d04da\",\"guide_template.md\":\"0f61d40d\",\"guide_runtime-config.md\":\"8d7d4f16\",\"guide_env.md\":\"802780bc\",\"reference_config_index.md\":\"94262ec5\",\"reference_plugin_plugins_layout.md\":\"5c7c196b\",\"reference_plugin_plugins_icon.md\":\"f2cb3f94\",\"guide_route.md\":\"11dd4240\",\"reference_plugin_plugins_locale.md\":\"e5f16382\",\"reference_plugin_plugins_request.md\":\"a62289a7\",\"reference_plugin_plugins_request-4.md\":\"58780b87\",\"reference_plugin_plugins_enums.md\":\"9c0c3064\",\"reference_plugin_plugins_qiankun.md\":\"ec18784c\",\"reference_plugin_plugins_vuex.md\":\"3806c06f\",\"reference_plugin_plugins_watermark.md\":\"95337b01\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Fes.js\",\"description\":\"一个好用的前端应用解决方案\",\"base\":\"/fes.js/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/WeBankFinTech/fes.js\"}],\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"编译时配置\",\"link\":\"/reference/config/\"},{\"text\":\"API\",\"link\":\"/reference/api/\"},{\"text\":\"插件\",\"link\":\"/reference/plugin/\",\"activeMatch\":\"/plugin/\"},{\"text\":\"CLI\",\"link\":\"/reference/cli/index.md\"},{\"text\":\"v3.4.6\",\"items\":[{\"text\":\"v2.0\",\"link\":\"https://fesjs.mumblefe.cn/2.0/\"},{\"text\":\"v1.0\",\"link\":\"https://fesjs.mumblefe.cn/1.0/\"}]},{\"text\":\"了解更多\",\"items\":[{\"text\":\"更新日志\",\"link\":\"https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md\"},{\"text\":\"fes-design\",\"link\":\"http://fes-design.mumblefe.cn/\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"开始\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/index.md\"},{\"text\":\"快速上手\",\"link\":\"/guide/getting-started.md\"}]},{\"text\":\"基础\",\"items\":[{\"text\":\"目录结构\",\"link\":\"/guide/directory-structure.md\"},{\"text\":\"Vite 和 Webpack 双构建\",\"link\":\"/guide/builder.md\"},{\"text\":\"编译时配置\",\"link\":\"/guide/config.md\"},{\"text\":\"运行时配置\",\"link\":\"/guide/runtime-config.md\"},{\"text\":\"环境变量\",\"link\":\"/guide/env.md\"},{\"text\":\"路由\",\"link\":\"/guide/route.md\"},{\"text\":\"插件\",\"link\":\"/guide/plugin.md\"},{\"text\":\"HTML 模板\",\"link\":\"/guide/template.md\"},{\"text\":\"Mock 数据\",\"link\":\"/guide/mock.md\"},{\"text\":\"从 2.x 迁移到 3.x\",\"link\":\"/guide/upgrade3.md\"}]},{\"text\":\"样式和资源文件\",\"items\":[{\"text\":\"使用图片\",\"link\":\"/guide/image.md\"},{\"text\":\"使用 css\",\"link\":\"/guide/css.md\"},{\"text\":\"静态资源\",\"link\":\"/guide/public.md\"}]},{\"text\":\"贡献指南\",\"link\":\"/guide/contributing.md\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq.md\"}],\"/reference/plugin/\":[{\"text\":\"介绍\",\"link\":\"/reference/plugin/index.md\"},{\"text\":\"Plugins\",\"items\":[{\"text\":\"@fesjs/plugin-access\",\"link\":\"/reference/plugin/plugins/access.md\"},{\"text\":\"@fesjs/plugin-enums\",\"link\":\"/reference/plugin/plugins/enums.md\"},{\"text\":\"@fesjs/plugin-icon\",\"link\":\"/reference/plugin/plugins/icon.md\"},{\"text\":\"@fesjs/plugin-jest\",\"link\":\"/reference/plugin/plugins/jest.md\"},{\"text\":\"@fesjs/plugin-layout\",\"link\":\"/reference/plugin/plugins/layout.md\"},{\"text\":\"@fesjs/plugin-locale\",\"link\":\"/reference/plugin/plugins/locale.md\"},{\"text\":\"@fesjs/plugin-model\",\"link\":\"/reference/plugin/plugins/model.md\"},{\"text\":\"@fesjs/plugin-request\",\"link\":\"/reference/plugin/plugins/request.md\"},{\"text\":\"@fesjs/plugin-vuex\",\"link\":\"/reference/plugin/plugins/vuex.md\"},{\"text\":\"@fesjs/plugin-qiankun\",\"link\":\"/reference/plugin/plugins/qiankun.md\"},{\"text\":\"@fesjs/plugin-windicss\",\"link\":\"/reference/plugin/plugins/windicss.md\"},{\"text\":\"@fesjs/plugin-sass\",\"link\":\"/reference/plugin/plugins/sass.md\"},{\"text\":\"@fesjs/plugin-editor\",\"link\":\"/reference/plugin/plugins/editor.md\"},{\"text\":\"@fesjs/plugin-pinia\",\"link\":\"/reference/plugin/plugins/pinia.md\"},{\"text\":\"@fesjs/plugin-watermark\",\"link\":\"/reference/plugin/plugins/watermark.md\"},{\"text\":\"@fesjs/plugin-login\",\"link\":\"/reference/plugin/plugins/login.md\"},{\"text\":\"@fesjs/plugin-swc\",\"link\":\"/reference/plugin/plugins/swc.md\"}]},{\"text\":\"插件开发\",\"items\":[{\"text\":\"插件介绍\",\"link\":\"/reference/plugin/dev/index.md\"},{\"text\":\"插件API\",\"link\":\"/reference/plugin/dev/api.md\"}]}]},\"outline\":{\"label\":\"本页目录\"},\"search\":{\"provider\":\"local\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2020-present Webank\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink