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/guide/route.html

187 lines
68 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>路由 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案">
<link rel="preload" href="/fes.js/assets/js/runtime~app.0fa263d4.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.b00c68fc.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ea3dd8a2.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.df4e24cc.js" as="script">
<link rel="stylesheet" href="/fes.js/assets/css/styles.b00c68fc.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 router-link-active" 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" 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="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</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="v3.0"><!--[--><!--]--> v3.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="v1.0"><!--[--><!--]--> v1.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 id="docsearch-container"></div></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 router-link-active" 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" 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="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</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="v3.0"><!--[--><!--]--> v3.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="v1.0"><!--[--><!--]--> v1.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"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/route.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/guide/route.html#routes" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="routes"><!--[--><!--]--> routes <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#mode" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="mode"><!--[--><!--]--> mode <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.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/guide/route.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/guide/route.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/guide/route.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/guide/route.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/guide/route.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/guide/route.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/guide/route.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/guide/route.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/guide/route.html#命令式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="命令式"><!--[--><!--]--> 命令式 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="路由" tabindex="-1"><a class="header-anchor" href="#路由" aria-hidden="true">#</a> 路由</h1><p>像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 <code>Vue Router</code> 实现的路由，想了解更多的同学可以看看<a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer">官方文档<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>。</p><h2 id="路由配置" tabindex="-1"><a class="header-anchor" href="#路由配置" aria-hidden="true">#</a> 路由配置</h2><p>在配置文件 <code>.fes.js</code>中通过 <code>router</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">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">routes</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">mode</span><span class="token operator">:</span> <span class="token string">&#39;hash&#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><span class="line-number">6</span><br></div></div><h3 id="routes" tabindex="-1"><a class="header-anchor" href="#routes" aria-hidden="true">#</a> routes</h3><p><code>routes</code> 是配置添加到路由的初始路由列表，格式为路由信息的数组。具体使用参考 <a href="https://next.router.vuejs.org/zh/guide/" target="_blank" rel="noopener noreferrer">Vue Router 文档<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> 中关于路由配置、路由匹配相关内容。</p><h3 id="mode" tabindex="-1"><a class="header-anchor" href="#mode" aria-hidden="true">#</a> mode</h3><p>创建历史记录的类型：</p><ul><li><strong>history</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createwebhistory" target="_blank" rel="noopener noreferrer">createWebHistory<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><strong>hash</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noopener noreferrer">createWebHashHistory<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><strong>memory</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noopener noreferrer">createMemoryHistory<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><p>默认是<code>hash</code>模式。</p><h2 id="约定式路由" tabindex="-1"><a class="header-anchor" href="#约定式路由" aria-hidden="true">#</a> 约定式路由</h2><p>约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。</p><h3 id="约定规范" tabindex="-1"><a class="header-anchor" href="#约定规范" aria-hidden="true">#</a> 约定规范</h3><p>比如以下文件结构：</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>pages
├── index.vue # 根路由页面 路径为 /
├── *.vue # 模糊匹配 路径为 *
├── a.vue # 路径 /a
├── b # 文件夹b
│ ├── index.vue # 路径 /b
│ ├── @id.vue # 动态路由 /b/:id
│ ├── c.vue # 路径 /b/c
│ └── layout.vue # /b 路径下所有页面公共的布局组件
└── layout.vue # 根路由下所有页面共用的布局组件
</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><p>编译后会得到以下路由配置：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/layout&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>
<span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;children&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/a&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/a&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;a&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">7</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/b&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/b/layout&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>
<span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;children&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/b/c&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/b/c&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;b_c&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">14</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/b/:id&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/b/@id&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;b__id&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">13</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/b&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/b/index&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;b_index&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">7</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 string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/index&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">5</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/:pathMatch(.*)&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/*&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;FUZZYMATCH&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">3</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><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><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br></div></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-hidden="true">#</a> 动态路由</h3><p>Fes.js 里约定以 <code>@</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><h3 id="嵌套路由" tabindex="-1"><a class="header-anchor" href="#嵌套路由" aria-hidden="true">#</a> 嵌套路由</h3><p>Fes.js 里约定目录下有 <code>layout.vue</code> 时会生成嵌套路由，以 <code>layout.vue</code> 为该目录的公共父组件，<code>layout.vue</code> 中必须实现 <code>RouterView</code></p><p>比如以下目录结构：</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>pages
└── users
├── layout.vue
├── index.vue
└── list.vue
</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>会生成路由：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/users&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/users/layout&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/users&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/users/index&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/users/list&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/users/list&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default <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></div></div><h3 id="模糊匹配" tabindex="-1"><a class="header-anchor" href="#模糊匹配" aria-hidden="true">#</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="noopener noreferrer">404 路由<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>。</p><p>比如以下目录结构：</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>pages
├── index.vue # 根路由页面 路径为 /
└── *.vue # 模糊匹配 路径为 *
</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><p>会生成路由：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/index&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">5</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/:pathMatch(.*)&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/**&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">3</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></div></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-hidden="true">#</a> 扩展路由元信息</h3><p>我们在定义路由时可以配置<code>meta</code>字段，用来记录一些跟路由相关的信息：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/foo&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">component</span><span class="token operator">:</span> Foo<span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;bar&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">component</span><span class="token operator">:</span> Bar<span class="token punctuation">,</span>
<span class="token comment">// a meta field</span>
<span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">requiresAuth</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<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>meta</code>：</p><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">vue</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">jsx</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">tsx</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><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 punctuation">&gt;</span></span>
{
&quot;name&quot;: &quot;store&quot;,
&quot;title&quot;: &quot;vuex测试&quot;
}
<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><span class="line-number">6</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-jsx ext-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMeta<span class="token punctuation">,</span> useRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;store&quot;</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;vuex测试&quot;</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><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-tsx ext-tsx line-numbers-mode"><pre class="language-tsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMeta<span class="token punctuation">,</span> useRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">&quot;store&quot;</span><span class="token punctuation">,</span>
title<span class="token operator">:</span> <span class="token string">&quot;vuex测试&quot;</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><!--]--></div><!--]--></div><p>则编译后的路由配置为：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/a&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/a&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>
<span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;store&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuex测试&quot;</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="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br></div><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="智能路由" tabindex="-1"><a class="header-anchor" href="#智能路由" aria-hidden="true">#</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-hidden="true">#</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="noopener noreferrer">Vue Router 官方文档<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>。</p><h3 id="声明式" tabindex="-1"><a class="header-anchor" href="#声明式" aria-hidden="true">#</a> 声明式</h3><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>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</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><h3 id="命令式" tabindex="-1"><a class="header-anchor" href="#命令式" aria-hidden="true">#</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="noopener noreferrer">Vue Rouer 文档<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>了解更多。</p><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> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 这三种形式是等价的</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&#39;/users/posva#bio&#39;</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/users/posva&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span><span class="token function">push</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;users&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">&#39;posva&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 只改变 hash</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 只改变 query</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token string">&#39;2&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 只改变 param</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">&#39;jolyne&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 跳转到上一个路由</span>
router<span class="token punctuation">.</span><span class="token function">goBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 跳转到前一个历史记录</span>
router<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 替换历史堆栈中的记录</span>
router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&#39;/new&#39;</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><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></div></div><!--]--></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/master/docs/guide/route.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">听海</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/env.html" class="nav-link" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/guide/plugin.html" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div>
<script src="/fes.js/assets/js/runtime~app.0fa263d4.js" defer></script><script src="/fes.js/assets/js/399.ea3dd8a2.js" defer></script><script src="/fes.js/assets/js/app.df4e24cc.js" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink