Vue项目代码改进（五）—— 将侧边栏菜单改造为动态后，如何按需显示不同图标

将侧边栏菜单改造为动态后，目前侧边栏每项的小图标都相同

    
      
            
                
                  
                    
                    {{item2.authName}}
                  
            
        
    

要实现如下效果，小图标 < i >的类名就不能写死

解决

将不同的icon的类名写进数组，v-for循环时一一渲染就好了。

data中，icon类名准备：
iconlist: ['el-icon-user', 'el-icon-s-tools', 'el-icon-s-goods', 'el-icon-s-order', 'el-icon-s-data']

修改后效果，搞掂

附：router.js

/*
 * @Author: your name
 * @Date: 2019-11-06 22:41:40
 * @LastEditTime: 2019-12-01 17:14:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vue.jsc:\编程\vuepro\mymall\src\router\index.js
 */
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/login/login.vue'
import Home from '@/components/home/home.vue'
import Users from '@/components/users/users.vue'
import Right from '@/components/rights/right.vue'
import Role from '@/components/rights/role.vue'
import GoodsList from '@/components/goods/goodslist.vue'
import GoodsAdd from '@/components/goods/goodsadd.vue'
import Cateparams from '@/components/goods/cateparams.vue'
import Goodscate from '@/components/goods/goodscate.vue'
import Order from '@/components/order/order.vue'
import Report from '@/components/report/report.vue'
import { Message } from 'element-ui'
Vue.use(Router)

const router = new Router({
  routes: [
    { name: 'login',
      path: '/login',
      component: Login
    },
    { name: 'home',
      path: '/',
      component: Home,
      children: [
        {name: 'users',
          path: 'users',
          component: Users},
        { name: 'right',
          path: 'rights',
          component: Right
        },
        { name: 'role',
          path: 'roles',
          component: Role
        },
        { name: 'goodslists',
          path: 'goods',
          component: GoodsList
        },
        { name: 'goodsadd',
          path: 'goodsadd',
          component: GoodsAdd
        },
        { name: 'params',
          path: 'params',
          component: Cateparams
        },
        { name: 'categories',
          path: 'categories',
          component: Goodscate
        },
        { name: 'order',
          path: 'orders',
          component: Order
        },
        { name: 'report',
          path: 'reports',
          component: Report
        }

      ]
    }
  ]
})
router.beforeEach((to, from, next) => {
  // ...
  if (to.path === '/login') {
    next()
  } else {
    const token = localStorage.getItem('token')
    if (!token) {
      router.push({name: 'login'})
      Message.warning('请登录')
      return
    }
    next()
  }
})
export default router