mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
241 lines
52 KiB
HTML
241 lines
52 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zn-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>异步路由和菜单 | Vue Antd Admin</title>
|
||
<meta name="generator" content="VuePress 1.5.2">
|
||
<link rel="icon" href="/favicon.ico">
|
||
<meta name="description" content="Vue Antd Admin">
|
||
<link rel="preload" href="/assets/css/0.styles.566e6543.css" as="style"><link rel="preload" href="/assets/js/app.4044373b.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/16.8cd2d550.js" as="script"><link rel="prefetch" href="/assets/js/10.b3af0ac4.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.9a3bd7bf.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.cf783558.js"><link rel="prefetch" href="/assets/js/17.a194e1da.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.58b681da.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.94de0f4c.js"><link rel="prefetch" href="/assets/js/22.be24120c.js"><link rel="prefetch" href="/assets/js/23.e2e4171a.js"><link rel="prefetch" href="/assets/js/24.d3dad329.js"><link rel="prefetch" href="/assets/js/25.936cbc18.js"><link rel="prefetch" href="/assets/js/26.bf7fa383.js"><link rel="prefetch" href="/assets/js/27.4a757523.js"><link rel="prefetch" href="/assets/js/28.fbeefcef.js"><link rel="prefetch" href="/assets/js/29.baa62900.js"><link rel="prefetch" href="/assets/js/3.ed8a83eb.js"><link rel="prefetch" href="/assets/js/30.6397ca35.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.40c5e0e5.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.a8d32d40.js"><link rel="prefetch" href="/assets/js/5.2d98be03.js"><link rel="prefetch" href="/assets/js/6.53f712d2.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.a6aa3458.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||
<link rel="stylesheet" href="/assets/css/0.styles.566e6543.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||
配置
|
||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||
主题
|
||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||
配置
|
||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||
主题
|
||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" aria-current="page" class="active sidebar-link">异步路由和菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/advance/async.html#异步加载路由" class="sidebar-link">异步加载路由</a></li><li class="sidebar-sub-header"><a href="/advance/async.html#异步加载菜单" class="sidebar-link">异步加载菜单</a></li></ul></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="异步路由和菜单"><a href="#异步路由和菜单" class="header-anchor">#</a> 异步路由和菜单</h1> <p>在现实业务中，存在这样的场景，系统的路由和菜单会根据用户的角色变化而变化，或者路由菜单根据用户的权限动态生成。我们为此准备了一套完整的异步加载方案，
|
||
可以让你很方便的从服务端加载路由和菜单配置，并应用到系统中。</p> <h2 id="异步加载路由"><a href="#异步加载路由" class="header-anchor">#</a> 异步加载路由</h2> <p>动态路由的实现主要有以下四个步骤：</p> <h3 id="开启异步路由设置"><a href="#开启异步路由设置" class="header-anchor">#</a> 开启异步路由设置</h3> <p>在 <code>/config/config.js</code> 文件中设置 <code>asyncRoutes</code> 的值为 true:</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
asyncRoutes<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//异步加载路由，true:开启，false:不开启</span>
|
||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><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></div></div><h3 id="注册路由组件"><a href="#注册路由组件" class="header-anchor">#</a> 注册路由组件</h3> <p>基础路由组件包含路由基本配置和对应的视图组件，我们统一在 <code>/router/async/router.map.js</code> 文件中注册它们。它和正常的路由配置基本无异，相当于把完整的路由拆分成单个的路由配置进行注册，为后面的路由动态配置打好基础。<br>
|
||
一个单独的路由组件注册示例如下：</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code>registerName<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//路由组件注册名称，唯一标识</span>
|
||
path<span class="token operator">:</span> <span class="token string">'path'</span><span class="token punctuation">,</span> <span class="token comment">//路由path，可缺省，默认取路由注册名称 registerName 的值</span>
|
||
name<span class="token operator">:</span> <span class="token string">'演示页'</span><span class="token punctuation">,</span> <span class="token comment">//路由名称</span>
|
||
redirect<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token comment">//路由重定向</span>
|
||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//路由视图</span>
|
||
icon<span class="token operator">:</span> <span class="token string">'permission'</span><span class="token punctuation">,</span> <span class="token comment">//路由的菜单icon，会注入到路由元数据meta中</span>
|
||
invisible<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//是否隐藏菜单项，true 隐藏，false 不隐藏，会注入到路由元数据meta中。</span>
|
||
authority<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//路由权限配置，会注入到路由元数据meta中。可缺省，默认为 ‘*’, 即无权限限制</span>
|
||
permission<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span> <span class="token comment">//路由需要的权限 </span>
|
||
role<span class="token operator">:</span> <span class="token string">'admin'</span> <span class="token comment">//路由需要的角色。当permission未设置，通过 role 检查权限</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
page<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//路由的页面数据，会注入到路由元数据meta中</span>
|
||
title<span class="token operator">:</span> <span class="token string">'演示页'</span><span class="token punctuation">,</span> <span class="token comment">//页面标题</span>
|
||
breadcrumb<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'首页'</span><span class="token punctuation">,</span> <span class="token string">'演示页'</span><span class="token punctuation">]</span> <span class="token comment">//页面面包屑</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><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><details class="custom-block details"><summary>点击查看完整的路由注册示例：</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 视图组件</span>
|
||
<span class="token keyword">const</span> view <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token function-variable function">tabs</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/layouts/tabs'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">blank</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/layouts/BlankView'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">page</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/layouts/PageView'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// 路由组件注册</span>
|
||
<span class="token keyword">const</span> routerMap <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
login<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
authority<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/login'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
demo<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'演示页'</span><span class="token punctuation">,</span>
|
||
renderMenu<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
exp403<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
authority<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span>
|
||
name<span class="token operator">:</span> <span class="token string">'exp403'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'403'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/exception/403'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
exp404<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'exp404'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'404'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/exception/404'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
exp500<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'exp500'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'500'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/exception/500'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
root<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
path<span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
|
||
name<span class="token operator">:</span> <span class="token string">'首页'</span><span class="token punctuation">,</span>
|
||
redirect<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
|
||
component<span class="token operator">:</span> view<span class="token punctuation">.</span>tabs
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
parent1<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'父级路由1'</span><span class="token punctuation">,</span>
|
||
icon<span class="token operator">:</span> <span class="token string">'dashboard'</span><span class="token punctuation">,</span>
|
||
component<span class="token operator">:</span> view<span class="token punctuation">.</span>blank
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
parent2<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'父级路由2'</span><span class="token punctuation">,</span>
|
||
icon<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span>
|
||
component<span class="token operator">:</span> view<span class="token punctuation">.</span>page
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
exception<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'异常页'</span><span class="token punctuation">,</span>
|
||
icon<span class="token operator">:</span> <span class="token string">'warning'</span><span class="token punctuation">,</span>
|
||
component<span class="token operator">:</span> view<span class="token punctuation">.</span>blank
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> routerMap
|
||
</code></pre> <div class="line-numbers-wrapper"><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></details> <h3 id="配置基本路由"><a href="#配置基本路由" class="header-anchor">#</a> 配置基本路由</h3> <p>如果没有任何路由，你的应用是无法访问的，所以我们需要在本地配置一些基本的路由，比如登录页、404、403 等。你可以在 <code>/router/async/config.async.js</code> 文件中配置一些本地必要的路由。如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> routesConfig <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token string">'login'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册的 registerName = login 的路由</span>
|
||
<span class="token string">'root'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册的 registerName = root 的路由</span>
|
||
<span class="token punctuation">{</span>
|
||
router<span class="token operator">:</span> <span class="token string">'exp404'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册的 registerName = exp404 的路由</span>
|
||
path<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token comment">//重写 exp404 路由的 path 属性</span>
|
||
name<span class="token operator">:</span> <span class="token string">'404'</span> <span class="token comment">//重写 exp404 路由的 name 属性</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
router<span class="token operator">:</span> <span class="token string">'exp403'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册的 registerName = exp403 的路由</span>
|
||
path<span class="token operator">:</span> <span class="token string">'/403'</span><span class="token punctuation">,</span> <span class="token comment">//重写 exp403 路由的 path 属性</span>
|
||
name<span class="token operator">:</span> <span class="token string">'403'</span> <span class="token comment">//重写 exp403 路由的 name 属性</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>完成配置后，即可通过 <code>routesConfig</code> 和已注册的 <code>routerMap</code> 生成 <a href="https://router.vuejs.org/zh/api/#router-%E6%9E%84%E5%BB%BA%E9%80%89%E9%A1%B9" target="_blank" rel="noopener noreferrer">router.options.routes<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a> 配置，如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
routes<span class="token operator">:</span> <span class="token function">parseRoutes</span><span class="token punctuation">(</span>routesConfig<span class="token punctuation">,</span> routerMap<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><details class="custom-block details"><summary>点击查看完整的 config.async.js 代码</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> routerMap <span class="token keyword">from</span> <span class="token string">'./router.map'</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span>parseRoutes<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/routerUtil'</span>
|
||
|
||
<span class="token comment">// 异步路由配置</span>
|
||
<span class="token keyword">const</span> routesConfig <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token string">'login'</span><span class="token punctuation">,</span>
|
||
<span class="token string">'root'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
router<span class="token operator">:</span> <span class="token string">'exp404'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span>
|
||
name<span class="token operator">:</span> <span class="token string">'404'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
router<span class="token operator">:</span> <span class="token string">'exp403'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'/403'</span><span class="token punctuation">,</span>
|
||
name<span class="token operator">:</span> <span class="token string">'403'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
routes<span class="token operator">:</span> <span class="token function">parseRoutes</span><span class="token punctuation">(</span>routesConfig<span class="token punctuation">,</span> routerMap<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> options
|
||
</code></pre> <div class="line-numbers-wrapper"><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></div></div></details> <p>完成以上设置后，本地就已经有了包含 login、404、403 页面的路由，并且这些路由是可以直接访问的。</p> <h3 id="异步获取路由配置"><a href="#异步获取路由配置" class="header-anchor">#</a> 异步获取路由配置</h3> <p>当用户登录后（或者其它的前提条件），你可能想根据不同用户加载不同的路由和菜单。
|
||
那么我们就需要先从后端服务获取异步路由配置，后端返回的异步路由配置 <code>routesConfig</code> 是一个异步路由配置数组， 应当如下格式：</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
router<span class="token operator">:</span> <span class="token string">'root'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = root 的路由</span>
|
||
children<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">//root 路由的子路由配置</span>
|
||
<span class="token punctuation">{</span>
|
||
router<span class="token operator">:</span> <span class="token string">'dashboard'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = dashboard 的路由</span>
|
||
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'workplace'</span><span class="token punctuation">,</span> <span class="token string">'analysis'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//dashboard 路由的子路由配置，依次匹配 registerName 为 workplace 和 analysis 的路由</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
router<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = form 的路由</span>
|
||
children<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">//form 路由的子路由配置</span>
|
||
<span class="token string">'basicForm'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = basicForm 的路由</span>
|
||
<span class="token string">'stepForm'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = stepForm 的路由</span>
|
||
<span class="token punctuation">{</span>
|
||
router<span class="token operator">:</span> <span class="token string">'advanceForm'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = advanceForm 的路由</span>
|
||
path<span class="token operator">:</span> <span class="token string">'advance'</span> <span class="token comment">//重写 advanceForm 路由的 path 属性</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>
|
||
router<span class="token operator">:</span> <span class="token string">'basicForm'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = basicForm 的路由</span>
|
||
name<span class="token operator">:</span> <span class="token string">'验权表单'</span><span class="token punctuation">,</span> <span class="token comment">//重写 basicForm 路由的 name 属性</span>
|
||
icon<span class="token operator">:</span> <span class="token string">'file-excel'</span><span class="token punctuation">,</span> <span class="token comment">//重写 basicForm 路由的 icon 属性</span>
|
||
authority<span class="token operator">:</span> <span class="token string">'form'</span> <span class="token comment">//重写 basicForm 路由的 authority 属性</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-wrapper"><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></div></div><p>其中 <code>router</code> 属性 对应 <code>router.map.js</code> 中已注册的<code>基础路由</code>的注册名称 <code>registerName</code>，<code>children</code> 属性为路由的嵌套子路由配置。<br>
|
||
有些情况下你可能想重写已注册路由的属性，你可以为 <code>routesConfig</code> 配置同名属性去覆盖它。如上面的<code>验权表单</code>路由覆盖了注册路由的 <code>name</code>、<code>icon</code>、<code>authority</code> 属性。</p> <h3 id="加载路由并应用"><a href="#加载路由并应用" class="header-anchor">#</a> 加载路由并应用</h3> <p>我们提供了一个路由加载工具，你只需调用 <code>/utils/routerUtil.js</code> 中的 <code>loadRoutes</code> 方法加载上一步获取到的 <code>routesConfig</code> 即可，如下：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br></div><pre class="language-js"><code><span class="token function">getRoutesConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> routesConfig <span class="token operator">=</span> result<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data
|
||
<span class="token function">loadRoutes</span><span class="token punctuation">(</span>routesConfig<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>至此，异步路由的加载就完成了，你可以访问异步加载的路由了。</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>上面获取异步路由的代码，在 /pages/login/Login.vue 文件中可以找到。<br>
|
||
loadRoutes 方法会合并 /router/async/config.async.js 文件中配置的基本路由。</p></div> <details class="custom-block details"><summary>点击查看 loadRoutes 的详细代码</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
|
||
* 加载路由
|
||
* @param routesConfig 路由配置
|
||
*/</span>
|
||
<span class="token keyword">function</span> <span class="token function">loadRoutes</span><span class="token punctuation">(</span><span class="token parameter">routesConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 如果 routesConfig 有值，则更新到本地，否则从本地获取</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>routesConfig<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'account/setRoutesConfig'</span><span class="token punctuation">,</span> routesConfig<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
routesConfig <span class="token operator">=</span> store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token string">'account/routesConfig'</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// 如果开启了异步路由，则加载异步路由配置</span>
|
||
<span class="token keyword">const</span> asyncRoutes <span class="token operator">=</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>setting<span class="token punctuation">.</span>asyncRoutes
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>asyncRoutes<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>routesConfig <span class="token operator">&&</span> routesConfig<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token function">parseRoutes</span><span class="token punctuation">(</span>routesConfig<span class="token punctuation">,</span> routerMap<span class="token punctuation">)</span>
|
||
<span class="token function">formatAuthority</span><span class="token punctuation">(</span>routes<span class="token punctuation">)</span>
|
||
<span class="token keyword">const</span> finalRoutes <span class="token operator">=</span> <span class="token function">mergeRoutes</span><span class="token punctuation">(</span>router<span class="token punctuation">.</span>options<span class="token punctuation">.</span>routes<span class="token punctuation">,</span> routes<span class="token punctuation">)</span>
|
||
router<span class="token punctuation">.</span>options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span>router<span class="token punctuation">.</span>options<span class="token punctuation">,</span> routes<span class="token operator">:</span> finalRoutes<span class="token punctuation">}</span>
|
||
router<span class="token punctuation">.</span>matcher <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>router<span class="token punctuation">.</span>options<span class="token punctuation">,</span> routes<span class="token operator">:</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>matcher
|
||
router<span class="token punctuation">.</span><span class="token function">addRoutes</span><span class="token punctuation">(</span>finalRoutes<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// 初始化Admin后台菜单数据</span>
|
||
<span class="token keyword">const</span> rootRoute <span class="token operator">=</span> router<span class="token punctuation">.</span>options<span class="token punctuation">.</span>routes<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/'</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">const</span> menuRoutes <span class="token operator">=</span> rootRoute <span class="token operator">&&</span> rootRoute<span class="token punctuation">.</span>children
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>menuRoutes<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">mergeI18nFromRoutes</span><span class="token punctuation">(</span>i18n<span class="token punctuation">,</span> menuRoutes<span class="token punctuation">)</span>
|
||
store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setting/setMenuData'</span><span class="token punctuation">,</span> menuRoutes<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><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></div></div></details> <h2 id="异步加载菜单"><a href="#异步加载菜单" class="header-anchor">#</a> 异步加载菜单</h2> <p>Vue Antd Admin 的菜单，是根据路由配置自动生成的，默认获取根路由 <code>‘/’</code> 下所有子路由作为菜单配置。<br>
|
||
当你完成了异步路由的加载，菜单也会随之改变，无需你做其它额外的操作。主要代码如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 初始化Admin后台菜单数据</span>
|
||
<span class="token keyword">const</span> rootRoute <span class="token operator">=</span> router<span class="token punctuation">.</span>options<span class="token punctuation">.</span>routes<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/'</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">const</span> menuRoutes <span class="token operator">=</span> rootRoute <span class="token operator">&&</span> rootRoute<span class="token punctuation">.</span>children
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>menuRoutes<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">mergeI18nFromRoutes</span><span class="token punctuation">(</span>i18n<span class="token punctuation">,</span> menuRoutes<span class="token punctuation">)</span>
|
||
store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setting/setMenuData'</span><span class="token punctuation">,</span> menuRoutes<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>如果你不想从根路由 <code>‘/’</code> 下获取菜单数据，可以根据自己的需求更改。</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/async.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/22/2020, 11:42:27 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||
←
|
||
<a href="/advance/i18n.html" class="prev">
|
||
国际化
|
||
</a></span> <span class="next"><a href="/advance/authority.html">
|
||
权限管理
|
||
</a>
|
||
→
|
||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||
<script src="/assets/js/app.4044373b.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/16.8cd2d550.js" defer></script>
|
||
</body>
|
||
</html>
|