vue 基于vue-admin-tempdate 动态路由和按钮显示，隐藏控制

最新推荐文章于 2024-07-19 10:16:01 发布

l1306395862

最新推荐文章于 2024-07-19 10:16:01 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/l1306395862/article/details/108544674

版权

这篇博客介绍了如何在Vue项目中实现动态路由和按钮的显示隐藏控制。通过登录时获取用户菜单权限，结合permission.js中的方法，在main.js中进行全局引入和设置。使用v-if指令根据权限决定按钮的可见性。

摘要由CSDN通过智能技术生成

登陆拉取用户菜单的时候将具有的button权限一起返回

import {
    constantRoutes } from '@/router'
import {
    getMenu } from '@/api/menu'
import Layout from '@/views/layout'
import {
   getRoutes,setRoutes} from '@/utils/auth.js'

function filterAsyncRouter(asyncRouterMap) {
    // 遍历后台传来的路由字符串，转换为组件对象
  try {
   
    const accessedRouters = asyncRouterMap.filter(route => {
   
      if (route.component) {
   
        if (route.component === 'Layout') {
    // Layout组件特殊处理
          route.component = Layout
        } else {
   
          const component = route.component
          route.component = resolve => {
   
            require(['@/views/' + component + '.vue'], resolve)
          }
        }
      }
      if (route.children && route.children.length) {
   
        route.children = filterAsyncRouter(route.children)
      }
      return true
    })
    return accessedRouters
  } catch (e) {
   
    console.log(e)
  }
}

const permisson = {
   
  state: {
   
    routes: getRoutes(