|
|
@@ -17,7 +17,7 @@
|
|
|
>[!Warning]
|
|
|
>如果是需要全局安装不要使用官方的方法来进行一个安装,在21-08-02 使用官方教程安装后使用 `vue3.0` 方法进行引用会在浏览器内提示 `Cannot read property 'use' of undefined` ,但是在终端中不会有错误提示, 使用上方方法安装,可正常使用
|
|
|
|
|
|
-`ant`官方安装方法
|
|
|
+#### `ant`官方安装方法
|
|
|
<!-- tabs:start -->
|
|
|
#### **yarn**
|
|
|
```shell
|
|
|
@@ -47,7 +47,7 @@ app.mount("#app");
|
|
|
createApp(app).use(xxx).use(xxx).use(Antd)
|
|
|
```
|
|
|
### ***vue2***
|
|
|
-没写
|
|
|
+没写,我也不知道
|
|
|
<!-- tabs:end -->
|
|
|
## 递归渲染 `sidebar`
|
|
|
#### 1. 思路解析
|
|
|
@@ -61,27 +61,25 @@ createApp(app).use(xxx).use(xxx).use(Antd)
|
|
|
</a-sub-menu>
|
|
|
</a-menu>
|
|
|
```
|
|
|
-如上方代码显示的结构将会显示为
|
|
|
-<hr>
|
|
|
+如上方代码显示的结构将会显示成下方结构,通过递归循环渲染此结构即可实现递归渲染
|
|
|
+<hr/>
|
|
|
目录1
|
|
|
<details>
|
|
|
<summary> 目录2 </summary>
|
|
|
-
|
|
|
-<option>目录2的子目录1</option>
|
|
|
-<option>目录2的子目录2</option>
|
|
|
+<option>子目录1</option>
|
|
|
+<option>子目录2</option>
|
|
|
</details>
|
|
|
-<hr>
|
|
|
-
|
|
|
-通过递归循环渲染此结构即可实现递归渲染
|
|
|
|
|
|
-#### 2. 文件结构
|
|
|
+#### 2. 目录与数据结构
|
|
|
+> [!tip]
|
|
|
+> 该目录数据结构与[vueRouter自动注册](../vue/vue_router.md)中的数据结构基本一致.
|
|
|
1. 文件夹目录结构,创建 主要使用 sidebar.js
|
|
|
url
|
|
|
- app.js
|
|
|
- components
|
|
|
- sidebars
|
|
|
- sidebar.js
|
|
|
-2. 示例数据结构
|
|
|
+app.js
|
|
|
+components
|
|
|
+sidebars
|
|
|
+sidebar.js
|
|
|
+1. 示例数据结构
|
|
|
```javascript
|
|
|
[
|
|
|
{
|
|
|
@@ -111,7 +109,7 @@ url
|
|
|
{
|
|
|
is_menu: true,
|
|
|
text: '配置',
|
|
|
- path: '/userConfig',
|
|
|
+ path: '/user/config',
|
|
|
name: 'Home',
|
|
|
component: Home
|
|
|
}
|
|
|
@@ -125,7 +123,15 @@ url
|
|
|
name: 'Log',
|
|
|
text: '日志',
|
|
|
component: Home
|
|
|
- }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '404页面',
|
|
|
+ is_menu: false,//路由项
|
|
|
+ path: '/:pathMatch(.*)*',
|
|
|
+ name: 'Log',
|
|
|
+ text: '日志',
|
|
|
+ component: Home
|
|
|
+ },
|
|
|
]
|
|
|
```
|
|
|
#### 3. 示例代码
|
|
|
@@ -166,7 +172,7 @@ export default {
|
|
|
|
|
|
</style>
|
|
|
```
|
|
|
-在app.js中使用sidebarMenuItem的内容
|
|
|
+在app.js中使用`sidebarMenuItem`的内容
|
|
|
```jsx
|
|
|
<template>
|
|
|
<a-layout id="components-layout-demo-responsive" class="h-full">
|
|
|
@@ -220,3 +226,9 @@ export default {
|
|
|
```jsx
|
|
|
<a-menu mode="inline"> 其他组件 </a-menu>
|
|
|
```
|
|
|
+
|
|
|
+## 侧边栏配合`vueRouter`
|
|
|
+> [!tip]
|
|
|
+> 确保已经使用`vue-router` 关于使用`vue-router`的方法可以查看
|
|
|
+> [官方文档](https://router.vuejs.org/zh/installation.html)
|
|
|
+> 或者 [我的vueRouter瞎整](../vue/vue_router.md)
|
