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/assets/js/v-6320961c.594d5357.js

1 line
45 KiB
JavaScript
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.

"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[626],{6254:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-6320961c",path:"/guide/route.html",title:"路由",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"路由配置",slug:"路由配置",children:[{level:3,title:"routes",slug:"routes",children:[]},{level:3,title:"mode",slug:"mode",children:[]}]},{level:2,title:"约定式路由",slug:"约定式路由",children:[{level:3,title:"约定规范",slug:"约定规范",children:[]},{level:3,title:"动态路由",slug:"动态路由",children:[]},{level:3,title:"嵌套路由",slug:"嵌套路由",children:[]},{level:3,title:"模糊匹配",slug:"模糊匹配",children:[]},{level:3,title:"扩展路由元信息",slug:"扩展路由元信息",children:[]},{level:3,title:"智能路由",slug:"智能路由",children:[]}]},{level:2,title:"路由跳转",slug:"路由跳转",children:[{level:3,title:"声明式",slug:"声明式",children:[]},{level:3,title:"命令式",slug:"命令式",children:[]}]}],filePathRelative:"guide/route.md",git:{updatedTime:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},7570:(n,s,a)=>{a.r(s),a.d(s,{default:()=>F});var p=a(6252);const t=(0,p._)("h1",{id:"路由",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#路由","aria-hidden":"true"},"#"),(0,p.Uk)(" 路由")],-1),e=(0,p._)("code",null,"Vue Router",-1),o={href:"https://next.router.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},r=(0,p.uE)('<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>\n <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <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>\n <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">&#39;hash&#39;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</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>',4),l=(0,p._)("code",null,"routes",-1),c={href:"https://next.router.vuejs.org/zh/guide/",target:"_blank",rel:"noopener noreferrer"},u=(0,p._)("h3",{id:"mode",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#mode","aria-hidden":"true"},"#"),(0,p.Uk)(" mode")],-1),i=(0,p._)("p",null,"创建历史记录的类型：",-1),k=(0,p._)("strong",null,"history",-1),b={href:"https://next.router.vuejs.org/zh/api/#createwebhistory",target:"_blank",rel:"noopener noreferrer"},m=(0,p._)("strong",null,"hash",-1),d={href:"https://next.router.vuejs.org/zh/api/#createWebHashHistory",target:"_blank",rel:"noopener noreferrer"},g=(0,p._)("strong",null,"memory",-1),h={href:"https://next.router.vuejs.org/zh/api/#createWebHashHistory",target:"_blank",rel:"noopener noreferrer"},y=(0,p.uE)('<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\n├── index.vue # 根路由页面 路径为 /\n├── *.vue # 模糊匹配 路径为 *\n├── a.vue # 路径 /a\n├── b # 文件夹b\n│ ├── index.vue # 路径 /b\n│ ├── @id.vue # 动态路由 /b/:id\n│ ├── c.vue # 路径 /b/c\n│ └── layout.vue # /b 路径下所有页面公共的布局组件\n└── layout.vue # 根路由下所有页面共用的布局组件\n</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>\n <span class="token punctuation">{</span>\n <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>\n <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>\n <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>\n <span class="token string-property property">&quot;children&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <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>\n <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>\n <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>\n <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>\n <span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">7</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <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>\n <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>\n <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>\n <span class="token string-property property">&quot;children&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <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>\n <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>\n <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>\n <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>\n <span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">14</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <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>\n <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>\n <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>\n <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>\n <span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">13</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <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>\n <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>\n <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>\n <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>\n <span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">7</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <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>\n <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>\n <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>\n <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>\n <span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">5</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <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>\n <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>\n <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>\n <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>\n <span class="token string-property property">&quot;count&quot;</span><span class="token operator">:</span> <span class="token number">3</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">]</span>\n</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\n└── users\n ├── layout.vue\n ├── index.vue\n └── list.vue\n</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>\n <span class="token punctuation">{</span> \n <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>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <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>\n <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>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">]</span>\n</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>',20),_=(0,p._)("code",null,"*",-1),v={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"},q=(0,p.uE)('<p>比如以下目录结构：</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>pages\n├── index.vue # 根路由页面 路径为 /\n└── *.vue # 模糊匹配 路径为 *\n</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>\n <span class="token punctuation">{</span> \n <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>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <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>\n <span class="token punctuation">}</span>\n<span class="token punctuation">]</span>\n</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>\n <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <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>\n <span class="token literal-property property">component</span><span class="token operator">:</span> Foo<span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <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>\n <span class="token literal-property property">component</span><span class="token operator">:</span> Bar<span class="token punctuation">,</span>\n <span class="token comment">// a meta field</span>\n <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>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n</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>',9),f=(0,p._)("div",{class:"language-vue ext-vue line-numbers-mode"},[(0,p._)("pre",{class:"language-vue"},[(0,p._)("code",null,[(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token punctuation"},"<"),(0,p.Uk)("config")]),(0,p._)("span",{class:"token punctuation"},">")]),(0,p.Uk)('\n{\n "name": "store",\n "title": "vuex测试"\n}\n'),(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token punctuation"},"</"),(0,p.Uk)("config")]),(0,p._)("span",{class:"token punctuation"},">")]),(0,p.Uk)("\n")])]),(0,p._)("div",{class:"line-numbers"},[(0,p._)("span",{class:"line-number"},"1"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"2"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"3"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"4"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"5"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"6"),(0,p._)("br")])],-1),x=(0,p._)("div",{class:"language-jsx ext-jsx line-numbers-mode"},[(0,p._)("pre",{class:"language-jsx"},[(0,p._)("code",null,[(0,p._)("span",{class:"token keyword"},"import"),(0,p.Uk)(),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)(" defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)(" useRoute "),(0,p._)("span",{class:"token punctuation"},"}"),(0,p.Uk)(),(0,p._)("span",{class:"token keyword"},"from"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},"'@fesjs/fes'"),(0,p._)("span",{class:"token punctuation"},";"),(0,p.Uk)("\n"),(0,p._)("span",{class:"token function"},"defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},"("),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)("\n "),(0,p._)("span",{class:"token literal-property property"},"name"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"store"'),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)("\n "),(0,p._)("span",{class:"token literal-property property"},"title"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"vuex测试"'),(0,p.Uk)("\n"),(0,p._)("span",{class:"token punctuation"},"}"),(0,p._)("span",{class:"token punctuation"},")"),(0,p.Uk)("\n")])]),(0,p._)("div",{class:"line-numbers"},[(0,p._)("span",{class:"line-number"},"1"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"2"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"3"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"4"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"5"),(0,p._)("br")])],-1),U=(0,p._)("div",{class:"language-tsx ext-tsx line-numbers-mode"},[(0,p._)("pre",{class:"language-tsx"},[(0,p._)("code",null,[(0,p._)("span",{class:"token keyword"},"import"),(0,p.Uk)(),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)(" defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)(" useRoute "),(0,p._)("span",{class:"token punctuation"},"}"),(0,p.Uk)(),(0,p._)("span",{class:"token keyword"},"from"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},"'@fesjs/fes'"),(0,p._)("span",{class:"token punctuation"},";"),(0,p.Uk)("\n"),(0,p._)("span",{class:"token function"},"defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},"("),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)("\n name"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"store"'),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)("\n title"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"vuex测试"'),(0,p.Uk)("\n"),(0,p._)("span",{class:"token punctuation"},"}"),(0,p._)("span",{class:"token punctuation"},")"),(0,p.Uk)("\n")])]),(0,p._)("div",{class:"line-numbers"},[(0,p._)("span",{class:"line-number"},"1"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"2"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"3"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"4"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"5"),(0,p._)("br")])],-1),j=(0,p.uE)('<p>则编译后的路由配置为：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span>\n <span class="token punctuation">{</span> \n <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> \n <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> \n <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <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>\n <span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuex测试&quot;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span>\n</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>',7),w={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"},E=(0,p.uE)('<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>\n <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>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>\n</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>',3),R=(0,p._)("code",null,"router",-1),W={href:"https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},B=(0,p.uE)('<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>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <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>\n <span class="token comment">// 这三种形式是等价的</span>\n 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>\n 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>\n 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>\n <span class="token comment">// 只改变 hash</span>\n 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>\n <span class="token comment">// 只改变 query</span>\n 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>\n <span class="token comment">// 只改变 param</span>\n 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>\n\n <span class="token comment">// 跳转到上一个路由</span>\n 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>\n\n <span class="token comment">// \b跳转到前一个历史记录</span>\n 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>\n\n <span class="token comment">// 替换历史堆栈中的记录</span>\n 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>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n</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>',1),H={},F=(0,a(3744).Z)(H,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),H=(0,p.up)("CodeGroupItem"),F=(0,p.up)("CodeGroup");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[(0,p.Uk)("像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 "),e,(0,p.Uk)(" 实现的路由，想了解更多的同学可以看看"),(0,p._)("a",o,[(0,p.Uk)("官方文档"),(0,p.Wm)(a)]),(0,p.Uk)("。")]),r,(0,p._)("p",null,[l,(0,p.Uk)(" 是配置添加到路由的初始路由列表，格式为路由信息的数组。具体使用参考 "),(0,p._)("a",c,[(0,p.Uk)("Vue Router 文档"),(0,p.Wm)(a)]),(0,p.Uk)(" 中关于路由配置、路由匹配相关内容。")]),u,i,(0,p._)("ul",null,[(0,p._)("li",null,[k,(0,p.Uk)("，对应 "),(0,p._)("a",b,[(0,p.Uk)("createWebHistory"),(0,p.Wm)(a)])]),(0,p._)("li",null,[m,(0,p.Uk)("，对应 "),(0,p._)("a",d,[(0,p.Uk)("createWebHashHistory"),(0,p.Wm)(a)])]),(0,p._)("li",null,[g,(0,p.Uk)("，对应 "),(0,p._)("a",h,[(0,p.Uk)("createMemoryHistory"),(0,p.Wm)(a)])])]),y,(0,p._)("p",null,[(0,p.Uk)("Fes.js 下约定文件名为 "),_,(0,p.Uk)(" 的路由是模糊匹配路由，可以用此特性实现 "),(0,p._)("a",v,[(0,p.Uk)("404 路由"),(0,p.Wm)(a)]),(0,p.Uk)("。")]),q,(0,p.Wm)(F,null,{default:(0,p.w5)((()=>[(0,p.Wm)(H,{title:"vue",active:""},{default:(0,p.w5)((()=>[f])),_:1}),(0,p.Wm)(H,{title:"jsx"},{default:(0,p.w5)((()=>[x])),_:1}),(0,p.Wm)(H,{title:"tsx"},{default:(0,p.w5)((()=>[U])),_:1})])),_:1}),j,(0,p._)("p",null,[(0,p.Uk)("想学习更多，可以查看 "),(0,p._)("a",w,[(0,p.Uk)("Vue Router 官方文档"),(0,p.Wm)(a)]),(0,p.Uk)("。")]),E,(0,p._)("p",null,[(0,p.Uk)("页面跳转 API 由 "),R,(0,p.Uk)(" 实例提供，查看 "),(0,p._)("a",W,[(0,p.Uk)("Vue Rouer 文档"),(0,p.Wm)(a)]),(0,p.Uk)("了解更多。")]),B],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]);
Reference in New Issue View Git Blame Copy Permalink