vue-element-admin 后台動態加載菜單

 

• Vue 實現動態生成路由:這個好使！！！！

Vue 實現動態生成路由（動態生成菜單，根據菜單動態生成路由）_Vincent的博客-CSDN博客_vue動態路由

https://blog.csdn.net/tly599167/article/details/107378249/

 

 

本人的辦法：

首先通過后端服務接口返回菜單的JSON格式

 

 

第一步：在\src\layout\components\Sidebar\index.vue中通過上一步獲取的JSON，動態循環讀取綁定菜單

<el-menu
      class="sidebar-menu"
      router
      :default-active="$route.path"
      :collapse="!sidebar.opened"
      :collapse-transition="false"
      :show-timeout="200"
      unique-opened
      background-color="#272a36"
      text-color="#e7e7e7"
      active-text-color="#ff6600">
      <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%;">
        <template v-for="group in menu">
          <el-submenu v-if="group.children && group.children.length > 0" :key="group.id" :index="group.id">
            <template slot="title">
              <i :class="group.class"></i>
              <span slot="title">{{group.name}}</span>
            </template>
            <el-menu-item v-for="menu in group.children" :key="menu.id" :index="menu.path">
              <i class="icon iconfont icon-pointer" style="vertical-align: baseline;"/>
              {{menu.name}}
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :key="group.id" :index="group.path">
            <i :class="group.class"></i>
            <span slot="title">{{group.name}}</span>
          </el-menu-item>
        </template>
      </el-scrollbar>
    </el-menu>

 

 

 

第二步：在\src\router\index.js的動態路由asyncRoutes中生成和后台接口返回一樣路徑的路由

同第一步，接口返回的路徑：/customer/next_leve

 

 

 

 

 如此就可以成功訪問了，如下：

 

• vue-element-admin的登錄狀態判斷

文件位置：src\permission.js

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

import { getMainMenu } from '@/api/user'
NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken() if (hasToken) { debugger if (to.path === '/login') { // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939