mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
213 lines
44 KiB
HTML
213 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-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/5.2d98be03.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/16.8cd2d550.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/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 open"><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" aria-current="page" class="active sidebar-link">页面</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/develop/page.html#新建页面文件" class="sidebar-link">新建页面文件</a></li><li class="sidebar-sub-header"><a href="/develop/page.html#配置路由" class="sidebar-link">配置路由</a></li><li class="sidebar-sub-header"><a href="/develop/page.html#i18n国际化配置" class="sidebar-link">i18n国际化配置</a></li></ul></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"><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" class="sidebar-link">异步路由和菜单</a></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>这里的『页面』包含新建页面文件，配置路由、样式文件及i18n国际化等。通常情况下，你仅需简单的配置就可以添加一个新的页面。</p> <h2 id="新建页面文件"><a href="#新建页面文件" class="header-anchor">#</a> 新建页面文件</h2> <p>在 src/pages 下创建新的 .vue 文件。如果页面相关文件过多，您可以创建一个文件夹来放置这些文件。</p> <div class="language-diff line-numbers-mode"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> ├── public
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── src
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ ├── assets # 本地静态资源
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> : :
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ ├── pages # 页面组件和通用模板
|
||
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> │ │ └── NewPage.vue # 新页面文件
|
||
</span></span>or
|
||
<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> │ │ └── newPage # 为新页面创建一个文件夹
|
||
</span><span class="token prefix inserted">+</span><span class="token line"> │ │ ├── NewPage.vue # 新页面文件
|
||
</span><span class="token prefix inserted">+</span><span class="token line"> │ │ ├── index.less # 页面样式文件
|
||
</span><span class="token prefix inserted">+</span><span class="token line"> │ │ └── index.js # import 引导文件
|
||
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> : :
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ └── main.js # 应用入口js
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── package.json # package.json
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── README.md # README.md
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> └── vue.config.js # vue 配置文件
|
||
</span></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><p>为了更好地演示，我们初始化 NewPage.vue 文件如下：</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-page<span class="token punctuation">"</span></span> <span class="token attr-name">:</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">`min-height: $</span><span class="token punctuation">{</span>pageMinHeight<span class="token punctuation">}</span>px`</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>演示页面<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span>mapState<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'NewPage'</span><span class="token punctuation">,</span>
|
||
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
desc<span class="token operator">:</span> <span class="token string">'这是一个演示页面'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
computed<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'setting'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'pageMinHeight'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"index.less"</span><span class="token punctuation">;</span></span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></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></div></div><p>index.less 文件：</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code><span class="token selector">.new-page</span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
|
||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token variable">@base-bg-color</span><span class="token punctuation">;</span>
|
||
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> 200px 0 0 0<span class="token punctuation">;</span>
|
||
<span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token operator">-</span>24px<span class="token punctuation">;</span>
|
||
<span class="token selector">h1</span><span class="token punctuation">{</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> 48px<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></div></div><p>index.js 文件：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> NewPage <span class="token keyword">from</span> <span class="token string">'./NewPage'</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> NewPage
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="配置路由"><a href="#配置路由" class="header-anchor">#</a> 配置路由</h2> <p>路由配置在 src/router/config.js 文件中，我们把上面创建的页面文件加入路由配置中</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><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 punctuation">[</span>
|
||
<span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'登录页'</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||
component<span class="token operator">:</span> TabsView<span class="token punctuation">,</span>
|
||
redirect<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
|
||
children<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
path<span class="token operator">:</span> <span class="token string">'newPage'</span><span class="token punctuation">,</span>
|
||
name<span class="token operator">:</span> <span class="token string">'新页面'</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/newPage'</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>
|
||
path<span class="token operator">:</span> <span class="token string">'dashboard'</span><span class="token punctuation">,</span>
|
||
name<span class="token operator">:</span> <span class="token string">'Dashboard'</span><span class="token punctuation">,</span>
|
||
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
icon<span class="token operator">:</span> <span class="token string">'dashboard'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
component<span class="token operator">:</span> BlankView<span class="token punctuation">,</span>
|
||
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token operator">...</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><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>我们建议使用英文设置路由的 path 属性，用中文设置路由的 name 属性。因为系统将自动提取路由的 path 和 name 属性作为国际化配置。这在后面的章节
|
||
<a href="/advance/i18n.html">进阶>国际化</a>中将会讲到。
|
||
当然，如果你的项目不需要国际化，可以忽略。</p></div> <p>启动服务，你将看到新增页面如下：
|
||
<img src="/assets/img/new-page.4da2ccce.png" alt="newPage">
|
||
如果你想把它配置为二级页面或更深层级的页面，只需为它配置一个父级路由，并为父级路由配置一个<a href="/develop/layout.html#admin-的视图">视图组件</a>，
|
||
这里我们选择 <a href="https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue" target="_blank" rel="noopener noreferrer">PageView<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"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br></div><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 punctuation">[</span>
|
||
<span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'登录页'</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||
component<span class="token operator">:</span> TabsView<span class="token punctuation">,</span>
|
||
redirect<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
|
||
children<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
path<span class="token operator">:</span> <span class="token string">'parent'</span><span class="token punctuation">,</span>
|
||
name<span class="token operator">:</span> <span class="token string">'父级路由'</span><span class="token punctuation">,</span>
|
||
component<span class="token operator">:</span> PageView<span class="token punctuation">,</span>
|
||
children<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
path<span class="token operator">:</span> <span class="token string">'newPage'</span><span class="token punctuation">,</span>
|
||
name<span class="token operator">:</span> <span class="token string">'新页面'</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/newPage'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'dashboard'</span><span class="token operator">...</span><span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token operator">...</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><span class="line-number">27</span><br></div></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>页面所有父级路由的组件必须配置为<a href="/develop/layout.html#admin-的视图">视图组件</a>，否则页面的内容可能不会显示。<br>
|
||
目前有 <a href="https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue" target="_blank" rel="noopener noreferrer">PageView<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>、
|
||
<a href="https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/tabs/TabsView.vue" target="_blank" rel="noopener noreferrer">TabsView<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> 和
|
||
<a href="https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/BlankView.vue" target="_blank" rel="noopener noreferrer">BlankView<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> 可选，
|
||
你也可以自己创建视图组件。（<a href="/develop/layout.html#admin-的视图">什么是视图组件？</a>）</p></div> <p>页面如下：
|
||
<img src="/assets/img/new-page-2.930ca3c7.png" alt="newPage2"></p> <h2 id="i18n国际化配置"><a href="#i18n国际化配置" class="header-anchor">#</a> i18n国际化配置</h2> <p>如果你想为页面增加i18n国际化配置，只需在页面同级文件夹下创建 i18n.js 文件，然后在页面文件中引入并使用即可。<br>
|
||
创建 i18n.js 文件：</p> <div class="language-diff line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> ├── public
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── src
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ ├── assets # 本地静态资源
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> : :
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ ├── pages # 页面组件和通用模板
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ │ └── newPage # 为新页面创建一个文件夹
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ │ ├── NewPage.vue # 新页面文件
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ │ ├── index.less # 页面样式文件
|
||
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> │ │ ├── i18n.js # i18n 国际化配置文件
|
||
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> │ │ └── index.js # import 引导文件
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> : :
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ └── main.js # 应用入口js
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── package.json # package.json
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── README.md # README.md
|
||
</span><span class="token prefix unchanged"> </span><span class="token line"> └── vue.config.js # vue 配置文件
|
||
</span></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></div></div><p>i18n.js 文件内容：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
messages<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token constant">CN</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
content<span class="token operator">:</span> <span class="token string">'演示页面'</span><span class="token punctuation">,</span>
|
||
description<span class="token operator">:</span> <span class="token string">'这是一个演示页面'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token constant">HK</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
content<span class="token operator">:</span> <span class="token string">'演示頁面'</span><span class="token punctuation">,</span>
|
||
description<span class="token operator">:</span> <span class="token string">'這是一個演示頁面'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token constant">US</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
content<span class="token operator">:</span> <span class="token string">'Demo Page'</span><span class="token punctuation">,</span>
|
||
description<span class="token operator">:</span> <span class="token string">'This is a demo page'</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></div></div><p>在 NewPage.vue 文件中引入 i18n.js，并添加需要国际化的内容。如下修改：</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br><br><div class="highlighted"> </div><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-page<span class="token punctuation">"</span></span> <span class="token attr-name">:</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">`min-height: $</span><span class="token punctuation">{</span>pageMinHeight<span class="token punctuation">}</span>px`</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>{{$t('content')}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span>mapState<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'NewPage'</span><span class="token punctuation">,</span>
|
||
i18n<span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./i18n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
computed<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'setting'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'pageMinHeight'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token function">desc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'description'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"index"</span><span class="token punctuation">;</span></span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></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></div></div><p>然后页面右上角语言项选择 <code>English</code>，你会发现，页面语言切换为英文了。如下：
|
||
<img src="/assets/img/new-page-us.60b25f14.png" alt="newPageUs">
|
||
一切就是这么的简单！</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>如果你尝试切换为繁体语言，可能会发现<code>页面标题</code>和<code>面包屑</code>显示为英文。<br>
|
||
这涉及到路由的国际化配置，在章节 <a href="/advance/i18n.html">进阶 > 国际化</a> 中，我们会对此作详细讲解。</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/develop/page.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">2020/8/6 14:42:44</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||
←
|
||
<a href="/develop/router.html" class="prev">
|
||
路由和菜单
|
||
</a></span> <span class="next"><a href="/develop/theme.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/5.2d98be03.js" defer></script>
|
||
</body>
|
||
</html>
|