chore: update document; 🌟

This commit is contained in:
iczer
2020-07-23 14:42:10 +08:00
parent b78cf5c6e1
commit ebb9d19ccd
5 changed files with 26 additions and 14 deletions

View File

@@ -29,7 +29,7 @@ lang: zh-CN
![blank-view](../assets/blank-view.png)
## 如何使用
通常我们会把视图组件和路由配置结合一起使用,我们把配置信息抽离在路由配置文件中 [router/index.js](https://github.com/iczer/vue-antd-admin/blob/master/src/router/index.js) 。如下:
通常我们会把视图组件和路由配置结合一起使用,我们把配置信息抽离在路由配置文件中 [src/router/config.js](https://github.com/iczer/vue-antd-admin/blob/master/src/router/config.js) 。如下:
```jsx {7,12}
{
path: 'form',

View File

@@ -67,9 +67,9 @@ import NewPage from '@/pages/newPage/NewPage'
export default NewPage
```
## 配置路由
路由配置在 src/router/index.js 文件中,我们把上面创建的页面文件加入路由配置中
路由配置在 src/router/config.js 文件中,我们把上面创建的页面文件加入路由配置中
```js {10-14}
const router = new Router({
const options = {
routes: [
{name: '登录页'...},
{
@@ -96,7 +96,7 @@ const router = new Router({
...
}
]
})
}
```
:::tip
我们建议使用英文设置路由的 path 属性,用中文设置路由的 name 属性。因为系统将自动提取路由的 path 和 name 属性作为国际化配置。这在后面的章节
@@ -108,7 +108,7 @@ const router = new Router({
如果你想把它配置为二级页面或更深层级的页面,只需为它配置一个父级路由,并为父级路由配置一个[视图组件](./layout.md#admin-的视图)
这里我们选择 [PageView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue),如下:
```js {10-21}
const router = new Router({
const options = {
routes: [
{name: '登录页'...},
{
@@ -134,7 +134,7 @@ const router = new Router({
...
}
]
})
}
```
:::warning
页面所有父级路由的组件必须配置为[视图组件](../develop/layout.md#admin-的视图),否则页面的内容可能不会显示。

View File

@@ -17,9 +17,8 @@ lang: zh-CN
## 路由
Vue Antd Admin 的路由配置完全遵循 vue-router 的 [routes 配置规则](https://router.vuejs.org/zh/api/#routes)。
另外我们还在 routes 的元数据属性 [meta](https://router.vuejs.org/zh/guide/advanced/meta.html#%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF) 中注入了三个属性 icon、invisible 和 page它们将在生成菜单和页头时发挥作用。配置示例如下
```js {8,14}
import Router from 'vue-router'
export default new Router({
```js {7,13}
const options = {
routes: [{
path: '/',
name: '首页',
@@ -45,9 +44,9 @@ export default new Router({
}]
}]
}]
})
}
```
完整配置示例,请查看 [router/index.js](https://github.com/iczer/vue-antd-admin/blob/master/src/router/index.js)
完整配置示例,请查看 [src/router/config.js](https://github.com/iczer/vue-antd-admin/blob/master/src/router/config.js)
## 菜单
Admin 系统的菜单直接通过路由配置生成,路由属性和菜单功能对应关系如下

View File

@@ -482,7 +482,7 @@ module.exports = {
```
### 多页签
在 src/config/config.js 设置 multiPage 来启用或关闭多页签模式
```js {7}
```js {6}
module.exports = {
theme: {
color: '#13c2c2',
@@ -499,4 +499,4 @@ module.exports = {
:::tip
以上所有主题设置项,均已映射到 vuex/setting 模块的 state 中,你可以通过提交 setting/mutations 实时修改设置项。
如何使用 [mutations](https://vuex.vuejs.org/zh/guide/mutations.html)
:::
:::