动态路由，动态侧边栏菜单

已于 2022-12-02 19:11:15 修改
阅读量970 收藏 2
点赞数
分类专栏： 项目总结 文章标签： vue.js javascript 前端 typescript
于 2022-12-02 19:10:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44999663/article/details/128150926
版权

动态加载侧栏菜单

数据案例：后台返回的 json数据，请点击跳到文章最后查看

有三种方法可实现，但都有各自的缺点

  • 第一种（不推荐）
    注册所有的路由，根据动态菜单动态加载
    缺点：不安全，用户可以通过更改浏览的的路径进去他没有权限的页面
  • 第二种（不推荐）
    通过枚举定义每个角色的路由，根据角色为其注册
    缺点：不够灵活，如果某个角色需要添加一个新的路由权限，就需要手动改前端代码重新发布
  • 第三种（推荐）
    通过后台返回的菜单去动态注册路由，需要添加路由时就让后端去修改好了，后台返回什么就注册什么（不关我事哈；后台的锅是😄）

这里使用第三种方法

主要分两步：

  1. 动态注册路由
  2. 将渲染动态菜单

目的：往路由/main里动态添加子路由
router/index.ts

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/main'
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/main',
    name: 'main',
    component: () => import('@/views/main/main.vue')
    // children: [] 往这里面添加子路由
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'not-found',
    component: () => import('@/views/not-found/404.vue')
  }
]

第一步：动态加载路由

注意：实际开发中，各级目录的获取实际看后台返回的数据，不管返回的数据是什么，目的都是为了拿到一二…级目录为其注册路由

通过观察返回数据可知，数据中 type=1 为一级目录，type=2为二级目录，type=3为权限

根据返回的数据先创建，对应的vue文件和路由

路由：以overview为例 overview.ts

const overview = () => import('@/views/main/analysis/overview/overview.vue')
export default {
  path: '/main/analysis/overview',
  name: 'overview',
  component: overview,
  children: []
}

vue文件：overview.vue

<template>
  <div>overview</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return {}
  }
})
</script>

<style scoped></style>

根据案例的数据，这里写一个递归函数对一二级目录的抽取
新建 `utils/map-menu.ts’
思路：

  1. 先加载默认所有的routers
  2. 根据菜单获取需要的routers动态加载（递归查找符合条件的路由并添加到routes里等待添加到router.main.children）
  3. 将路由注册,即将routes 添加到 router.main.children
import { RouteRecordRaw } from 'vue-router'
import router from '@/router'
export function mapMenuToRoutes(userMenu: any[]): RouteRecordRaw[] {
  const routes: RouteRecordRaw[] = []

  //1.先加载默认所有的routers
  const allRouters: RouteRecordRaw[] = []
  // webpack提供的require.context，可获取文件夹下的所有文件
  // require.context(需获取文件所在的文件夹,是否递归查找,获取规则【正则表达式】)
  const routerFiles = require.context('../router/main', true, /\.ts/)
  // console.log('routerFiles', routerFiles.keys())
  routerFiles.keys().forEach((key) => {
    const route = require('../router/main' + key.split('.')[1])
    const routeArr = route.default
    // console.log(route.default)
    allRouters.push(routeArr)
  })
  // 2.根据菜单获取需要的routers动态加载

  //递归查找符合条件的路由并添加到routes里等待加载
  const _recurseGetRoute = (menus: any) => {
    for (const menu of menus) {
      if (menu.type === 2) {
        const needRoute = allRouters.find((item) => {
          return item.path == menu.url
        })
        if (needRoute) {
          routes.push(needRoute)
        }
        if (!firstMenu) {
          firstMenu = needRoute
        }
      } else {
        _recurseGetRoute(menu.children)
      }
    }
  }
  _recurseGetRoute(userMenu)

  // console.log('routes', routes)
  //将路由注册,即将routes 添加到 router.main.children
  routes.forEach((element) => {
    router.addRoute('main', element)
  })

  return routes
}

第二步：渲染动态菜单

  1. 通过上面获取到的全部 json数据(即后台返回的原数据)通过el-menu组件渲染
  2. 为每个菜单添加路由

在· utils/map-menu.ts 添加用于获取当期路由的递归函数

let currentMenu: any = null
export function pathMapToMenu(userMenu: any[], currentPath: string): any {
  // console.log(userMenu)

  for (const item of userMenu) {
    if (item.type === 2 && item.url === currentPath) {
      //找到了当前路径对应的路由
      // console.log(item)
      if (!currentMenu) {
        currentMenu = item
      }
      return item
    } else {
      pathMapToMenu(item.children ?? [], currentPath)
    }
  }
}
export {currentMenu}

在侧边栏组件添加动态菜单，并调用上面的函数，为每个菜单添加路由

<template>
  <div>
    <div class="logo">
      <img class="img" src="@/assets/logo透明.png" />
      <div v-if="!collapse" class="title">后台管理端</div>
    </div>

    <div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#0a2137"
        class="el-menu-vertical-demo"
        :collapse-transition="false"
        :default-active="defaultValue"
        :unique-opened="true"
        :collapse="collapse"
        text-color="#fff"
      >
        <template v-for="item in userMenus" :key="item.id + ''">
          <!-- 二级菜单 -->
          <template v-if="item.type === 1">
            <el-sub-menu :index="item.id + ''">
              <template #title>
                <el-icon v-if="item.icon"
                  ><component :is="getIcon(item.icon)"
                /></el-icon>
                <span>{{ item.name }}</span>
              </template>

              <el-menu-item-group>
                <template
                  v-for="subItem in item.children"
                  :key="subItem.id + ''"
                >
                  <el-menu-item
                    :index="subItem.id + ''"
                    @click="clickMenuItem(subItem)"
                  >
                    <el-icon v-if="subItem.icon"
                      ><component :is="getIcon(subItem.icon)"
                    /></el-icon>
                    <span>{{ subItem.name }}</span>
                  </el-menu-item>
                </template>
              </el-menu-item-group>
            </el-sub-menu>
          </template>
          <!-- 一级菜单 -->
          <template v-else-if="item.type === 2">
            <el-menu-item :index="item.id + ''" @click="clickMenuItem(item)">
              <el-icon v-if="item.icon"
                ><component :is="getIcon(item.icon)"
              /></el-icon>
              <span>{{ item.name }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { userStore } from '@/store'
import { IMenuItemState } from './type'
import { useRouter, useRoute } from 'vue-router'
import { pathMapToMenu, currentMenu } from '@/utils/map-menu'
export default defineComponent({
  props: {
    collapse: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const store = userStore()
    const router = useRouter()
    const route = useRoute()
    const currentPath = route.path

    console.log('currentPath', currentPath)
    const userMenus = store.state.login.userMenus
    // console.log(userMenus)

    pathMapToMenu(userMenus, currentPath)
    const defaultValue = ref(currentMenu.id + '')
    // console.log('currentPathMenu', currentMenu)

    const getIcon = (icon: string): string => {
      const iconArr = icon.split('-')
      if (iconArr.length > 3) {
        iconArr.splice(0, 2)
        return iconArr.join('-')
      } else {
        return iconArr[2]
      }
    }
    const clickMenuItem = (menuItem: any) => {
      router.push({
        path: menuItem.url ?? 'not-found'
      })
    }

    return {
      userMenus,
      getIcon,
      clickMenuItem,
      defaultValue
    }
  }
})
</script>
<style scoped lang="less">
.logo {
  display: flex;
  flex-wrap: nowrap;
  height: 48px;
  overflow: hidden;
  .img {
    // height: 40px;
    width: 40px;
    height: auto;
    padding: 4px 10px;
  }
  .title {
    line-height: 44px;
    color: #fff;
    font-size: 18px;
  }
}
.el-menu-item.is-active {
  background-color: #434a50 !important;
}
.el-menu-item {
  // background-color: #545c64;
}
/deep/ .el-menu-item-group__title {
  padding: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  // transition: 1s linear all !important;
  // min-height: 400px;
}
.el-menu {
  border-right: none;
}
</style>

到这里动态侧边栏菜单就完成了

json数据

[
    {
        "id": 38,
        "name": "系统总览",
        "type": 1,
        "url": "/main/analysis",
        "icon": "el-icon-monitor",
        "sort": 1,
        "children": [
            {
                "id": 39,
                "url": "/main/analysis/overview",
                "name": "核心技术",
                "sort": 106,
                "type": 2,
                "children": null,
                "parentId": 38
            },
            {
                "id": 40,
                "url": "/main/analysis/dashboard",
                "name": "商品统计",
                "sort": 107,
                "type": 2,
                "children": null,
                "parentId": 38
            }
        ]
    },
    {
        "id": 1,
        "name": "系统管理",
        "type": 1,
        "url": "/main/system",
        "icon": "el-icon-setting",
        "sort": 2,
        "children": [
            {
                "id": 2,
                "url": "/main/system/user",
                "name": "用户管理",
                "sort": 100,
                "type": 2,
                "children": [
                    {
                        "id": 5,
                        "url": null,
                        "name": "创建用户",
                        "sort": null,
                        "type": 3,
                        "parentId": 2,
                        "permission": "system:users:create"
                    },
                    {
                        "id": 6,
                        "url": null,
                        "name": "删除用户",
                        "sort": null,
                        "type": 3,
                        "parentId": 2,
                        "permission": "system:users:delete"
                    },
                    {
                        "id": 7,
                        "url": null,
                        "name": "修改用户",
                        "sort": null,
                        "type": 3,
                        "parentId": 2,
                        "permission": "system:users:update"
                    },
                    {
                        "id": 8,
                        "url": null,
                        "name": "查询用户",
                        "sort": null,
                        "type": 3,
                        "parentId": 2,
                        "permission": "system:users:query"
                    }
                ],
                "parentId": 1
            },
            {
                "id": 3,
                "url": "/main/system/department",
                "name": "部门管理",
                "sort": 101,
                "type": 2,
                "children": [
                    {
                        "id": 17,
                        "url": null,
                        "name": "创建部门",
                        "sort": null,
                        "type": 3,
                        "parentId": 3,
                        "permission": "system:department:create"
                    },
                    {
                        "id": 18,
                        "url": null,
                        "name": "删除部门",
                        "sort": null,
                        "type": 3,
                        "parentId": 3,
                        "permission": "system:department:delete"
                    },
                    {
                        "id": 19,
                        "url": null,
                        "name": "修改部门",
                        "sort": null,
                        "type": 3,
                        "parentId": 3,
                        "permission": "system:department:update"
                    },
                    {
                        "id": 20,
                        "url": null,
                        "name": "查询部门",
                        "sort": null,
                        "type": 3,
                        "parentId": 3,
                        "permission": "system:department:query"
                    }
                ],
                "parentId": 1
            },
            {
                "id": 4,
                "url": "/main/system/menu",
                "name": "菜单管理",
                "sort": 103,
                "type": 2,
                "children": [
                    {
                        "id": 21,
                        "url": null,
                        "name": "创建菜单",
                        "sort": null,
                        "type": 3,
                        "parentId": 4,
                        "permission": "system:menu:create"
                    },
                    {
                        "id": 22,
                        "url": null,
                        "name": "删除菜单",
                        "sort": null,
                        "type": 3,
                        "parentId": 4,
                        "permission": "system:menu:delete"
                    },
                    {
                        "id": 23,
                        "url": null,
                        "name": "修改菜单",
                        "sort": null,
                        "type": 3,
                        "parentId": 4,
                        "permission": "system:menu:update"
                    },
                    {
                        "id": 24,
                        "url": null,
                        "name": "查询菜单",
                        "sort": null,
                        "type": 3,
                        "parentId": 4,
                        "permission": "system:menu:query"
                    }
                ],
                "parentId": 1
            },
            {
                "id": 25,
                "url": "/main/system/role",
                "name": "角色管理",
                "sort": 102,
                "type": 2,
                "children": [
                    {
                        "id": 26,
                        "url": null,
                        "name": "创建角色",
                        "sort": null,
                        "type": 3,
                        "parentId": 25,
                        "permission": "system:role:create"
                    },
                    {
                        "id": 27,
                        "url": null,
                        "name": "删除角色",
                        "sort": null,
                        "type": 3,
                        "parentId": 25,
                        "permission": "system:role:delete"
                    },
                    {
                        "id": 28,
                        "url": null,
                        "name": "修改角色",
                        "sort": null,
                        "type": 3,
                        "parentId": 25,
                        "permission": "system:role:update"
                    },
                    {
                        "id": 29,
                        "url": null,
                        "name": "查询角色",
                        "sort": null,
                        "type": 3,
                        "parentId": 25,
                        "permission": "system:role:query"
                    }
                ],
                "parentId": 1
            }
        ]
    },
    {
        "id": 9,
        "name": "商品中心",
        "type": 1,
        "url": "/main/product",
        "icon": "el-icon-goods",
        "sort": 3,
        "children": [
            {
                "id": 15,
                "url": "/main/product/category",
                "name": "商品类别",
                "sort": 104,
                "type": 2,
                "children": [
                    {
                        "id": 30,
                        "url": null,
                        "name": "创建类别",
                        "sort": null,
                        "type": 3,
                        "parentId": 15,
                        "permission": "system:category:create"
                    },
                    {
                        "id": 31,
                        "url": null,
                        "name": "删除类别",
                        "sort": null,
                        "type": 3,
                        "parentId": 15,
                        "permission": "system:category:delete"
                    },
                    {
                        "id": 32,
                        "url": null,
                        "name": "修改类别",
                        "sort": null,
                        "type": 3,
                        "parentId": 15,
                        "permission": "system:category:update"
                    },
                    {
                        "id": 33,
                        "url": null,
                        "name": "查询类别",
                        "sort": null,
                        "type": 3,
                        "parentId": 15,
                        "permission": "system:category:query"
                    }
                ],
                "parentId": 9
            },
            {
                "id": 16,
                "url": "/main/product/goods",
                "name": "商品信息",
                "sort": 105,
                "type": 2,
                "children": [
                    {
                        "id": 34,
                        "url": null,
                        "name": "创建商品",
                        "sort": null,
                        "type": 3,
                        "parentId": 16,
                        "permission": "system:goods:create"
                    },
                    {
                        "id": 35,
                        "url": null,
                        "name": "删除商品",
                        "sort": null,
                        "type": 3,
                        "parentId": 16,
                        "permission": "system:goods:delete"
                    },
                    {
                        "id": 36,
                        "url": null,
                        "name": "修改商品",
                        "sort": null,
                        "type": 3,
                        "parentId": 16,
                        "permission": "system:goods:update"
                    },
                    {
                        "id": 37,
                        "url": null,
                        "name": "查询商品",
                        "sort": null,
                        "type": 3,
                        "parentId": 16,
                        "permission": "system:goods:query"
                    }
                ],
                "parentId": 9
            }
        ]
    },
    {
        "id": 41,
        "name": "随便聊聊",
        "type": 1,
        "url": "/main/story",
        "icon": "el-icon-chat-line-round",
        "sort": 4,
        "children": [
            {
                "id": 42,
                "url": "/main/story/chat",
                "name": "你的故事",
                "sort": 108,
                "type": 2,
                "children": null,
                "parentId": 41
            },
            {
                "id": 43,
                "url": "/main/story/list",
                "name": "故事列表",
                "sort": 109,
                "type": 2,
                "children": [],
                "parentId": 41
            }
        ]
    }
]
浮云⚡⭐
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web 动态菜单
11-05
web 动态菜单实现，仅使用css而不使用js
动态菜单栏
yqj2065的博客
07-02 627
根据角色和功能的关系矩阵，生成和管理菜单。 MyMenuBar 用String[] menuNames和String[][] menuItemNames分别描述菜单和菜单项。然后，按照角色和功能的关系矩阵，设置各菜单项的可见性。 每一个菜单项有自己的ActionListener对象，它们全部调用含有一个大分支结构的方法actionPerformed。 private JM
RouteRecordRaw
最新发布
STATICHIT静砸的博客
04-23 963
1.Component: 表示一个 Vue 组件类型，这个类型来源于Vue。2.: 表示一个对象，键是字符串类型，值是组件类型 `Component`。这个类型来源于TypeScript。2.5.Dictionary：Dictionary不是 TypeScript 中的内置类型，而是一种常用的自定义类型约定。在 TypeScript 中，Dictionary通常用于表示一个键值对对象，其中键是字符串类型，值可以是任意类型。Dictionary是一个泛型类型，它接受一个类型参数T，表示值的类型。
动态修改 webconfig 节点constring_七天系列第三弹：Trie 树实现动态路由
weixin_39637661的博客
12-08 123
作者：geektutu链接：https://geektutu.com/post/gee-day3.html很多同学总觉得学了数据结构和算法，除了应付面试题就没怎么用到过。其实在很多开源框架的实现中就应用了各种各样的数据结构，非常值得一学。当然功利点讲，这样的面试点写进简历里，直接逼面试官问你这个点，面试节奏稳稳的。3. Gee - Trie 树路由(Router)使用 Trie 树(前缀...
Zuul 动态路由源码及几种实现方式
u010889990的专栏
07-04 1821
转自：陈一乐 id: codercyj本文介绍Zuul路由的源码以及实现动态路由的几种方式，路由信息可以来自Properties文件、DB、Apollo等。可以阅读 Sp...
07 动态菜单栏
g759780748的博客
01-30 2973
1 左侧菜单栏静态数据改为动态数据 1 后台数据 <script> export default { data() { return { menuList: [ { name: "SysManga", title: "系统管理", icon: "el-icon-s-operation", path: "", component: "",
前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由
08-15
VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表，然后前端直接...
element-ui使用导航栏跳转路由的用法详解
10-18
今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue在页面右上角实现可悬浮/隐藏的系统菜单
01-21
这里暂时只涉及系统菜单这一个功能，因此路由暂未涉及。 基本思路是：通过props将showCancel这个Boolean值传递到子组件，对父子组件分别绑定事件，来控制这个系统菜单的显示状态。其中在父组件的绑定click事件中，将...
react router4+redux实现路由权限控制的方法
11-26
这里主要是用一个权限控制类来定义路由路由信息，同时用redux把登录成功后要访问的路由地址给保存起来，登录成功时看redux里面有没有存地址，如果没有存地址就跳转到默认路由地址。 路由权限控制类 在这个方法里面...
qf-sub-menu：基于二次封装的element-ui中的subMenu通过这个组件，注入路由数据，能够快速渲染出菜单
02-13
定义数据源首先需要有一组数据，基于权限生成的用户菜单路由配置数据，这些数据应该是这样的const routes = [ { path : 'Welcome' , name : 'Welcome' , component : Welcome , meta : { name : '管理首页' , icon :...
JQUERY动态菜单栏添加
02-24
功能其实比较简单，可以提供给为初级选手座位参考
完全是动态生成菜单栏
05-31
完全是动态生成的菜单栏。绝对有学习的价值。。。。。。。。。
dynamicRouter:vue的动态路由实现方式(从后台接口获取动态路由，并生成左侧菜单)
05-02
先驱者 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。 动态路由器
Vue 动态添加路由及生成菜单的方法示例
10-16
主要介绍了Vue 动态添加路由及生成菜单的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
HTML5动态菜单
DICA的SEOer专栏
04-10 864
该示例使用了HTML5的nav和ul标签，以及CSS3的Flexbox布局来创建一个动态菜单。CSS样式用于设置页面的背景颜色，字体样式和菜单栏的样式。该示例的菜单栏使用了Flexbox布局，将菜单项作为li元素的子元素，并使用a元素来设置菜单项的链接。当鼠标悬停在菜单项上时，使用CSS3的transition属性来设置渐变效果，以提高用户体验。该示例可以用于各种网站和应用程序的菜单栏，以提供更好的用户体验。请随意使用和修改该示例，以适应您的需要。
动态菜单栏的设置
weixin_49884163的博客
08-07 402
设置动态菜单栏的重点在于 hover的使用上， ul:hover{} // ul会显示出想要的效果，而并非所以父子元素都实现。 <style type="text/css"> ul{padding:0;margin: 0;} #nav {line-height: 30px;list-style-type: none;} #nav li {float: left;width:150px;text-align: center; background: #AAAAAA}
Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)，其实就是路由在后台配置 前端请求接口后 生成路由表
热门推荐
lzfengquan的博客
02-14 1万+
最近刚结束一个项目，然后再客户的百般刁难下又增加了项目新需求： 后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由) vue项目实现动态路由的方式大体可分为两种: 1.第一种就是我们前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由) 详情可以看看这个人写的，感觉挺好的https://segmentfault.com/a/1190000009275424,我当时看这个项目看了好久才明白一点逻辑， 因为大神的动态路由那里有好多层判断，并且穿插各种vuex，把小
动态菜单/权限管理的实现
4396的博客
07-16 1万+
权限管理 序 现在基本上大大小小的系统都由权限分配这一基础功能，不同的用户看到的界面不一样，能够使用的功能也不会尽然相同 所以我要让我的系统做到超级管理员可以看到/操作所有界面，而新闻管理员只能看到新闻管理模块，仓库管理员只能看到仓库管理模块等等。。。 思想 动态菜单：系统里面有很多菜单可以进行点击操作，但是不同的角色用户能够操做的菜单肯定是不会相同的，那么，我就需要用角色来区分用户...
html侧边栏导航栏网页
05-29
好的，您需要关于HTML侧边栏导航栏网页的信息，是吗？那我来为您解答。 HTML侧边栏导航栏网页通常是指网页中具有固定位置的导航栏，以及在页面侧边位置的栏目导航。这种网页设计常用于大型网站，以方便用户快速定位页面内容。 要实现HTML侧边栏导航栏网页，需要使用HTML、CSS和JavaScript等技术。其中，HTML用于定义页面内容和结构，CSS用于样式设计和布局，JavaScript用于交互和动态效果的实现。 以下是实现HTML侧边栏导航栏网页的基本步骤： 1. 定义HTML文档结构，包括页面头部信息、导航栏、侧边栏和主体内容等部分。 2. 使用CSS设置导航栏和侧边栏的样式和布局，使其固定在页面上方和侧边位置。 3. 使用JavaScript实现导航栏和侧边栏的交互效果，如鼠标悬浮、点击等事件。 4. 根据实际需求，添加其他功能和效果，如搜索框、滚动条等。 希望以上信息能够帮助您了解HTML侧边栏导航栏网页的基本实现方式。如有任何疑问，欢迎继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值