iview一级菜单、二级菜单、三级菜单路由配置

一级菜单:

  {
    path: '/realTime',
    name: 'realTime',
    meta: {
      icon: 'md-cloud-uploads',
      title: '实时监控'
    },
    component: Main,
    children: [{
      path: 'realTime',
      name: 'realTime',
      meta: {
        icon: 'md-occupation',
        title: '实时监控'
      },
      component: (resolve) => require(['@/view/realTime/realTime.vue'], resolve)
    }, ]
  },

二级菜单:

  {
    path: '/configuration',
    name: 'configuration',
    meta: {
      icon: 'md-cloud-uploads',
      title: '配置中心'
    },
    component: Main,
    children: [{
        path: 'userInfo',
        name: 'userInfo',
        meta: {
          icon: 'md-occupation',
          title: '员工管理'
        },
        component: () => import('@/view/configuration/userInfo.vue')
      },
    ]
  },

三级菜单

{
    path: '/configuration',
    name: 'configuration',
    meta: {
      icon: 'md-cloud-uploads',
      title: '配置中心'
    },
    component: Main,
    children: [{
        path: 'material',
        name: 'material',
        component: () => import('@/view/configuration/material'),
        meta: {
          icon: 'md-occupation',
          title: '物料管理'
        },
        children: [{
          path: 'information',
          name: 'information',
          meta: {
            icon: 'md-occupation',
            title: '物料信息管理'
          },
          component: () => import('@/view/configuration/information.vue')
        }, {
          path: 'parameter',
          name: 'parameter',
          meta: {
            icon: 'md-occupation',
            title: '物料参数管理'
          },
          component: () => import('@/view/configuration/parameter.vue')
        }, ]
      }
    ]
  },

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
1. 首先,在项目中引入iview和vue-resource: ``` import Vue from 'vue' import iView from 'iview' import 'iview/dist/styles/iview.css' import VueResource from 'vue-resource' Vue.use(iView) Vue.use(VueResource) ``` 2. 在vue文件中使用iview的Select组件实现省市选择: ``` <template> <div> <Select v-model="province" @on-change="getCityList"> <Option v-for="(item, index) in provinceList" :value="item.id" :key="index">{{ item.name }}</Option> </Select> <Select v-model="city"> <Option v-for="(item, index) in cityList" :value="item.id" :key="index">{{ item.name }}</Option> </Select> </div> </template> <script> export default { data () { return { province: '', city: '', provinceList: [], cityList: [] } }, mounted () { this.getProvinceList() }, methods: { // 获取省份列表 getProvinceList () { this.$http.get('/api/province').then(res => { this.provinceList = res.data }) }, // 获取城市列表 getCityList () { this.$http.get('/api/city', { params: { province: this.province } }).then(res => { this.cityList = res.data }) } } } </script> ``` 3. 在后台实现省市数据接口: 省份接口: ``` app.get('/api/province', function(req, res) { res.json([ {id: 1, name: '北京'}, {id: 2, name: '上海'}, {id: 3, name: '广东省'}, {id: 4, name: '湖南省'} ]) }) ``` 城市接口: ``` app.get('/api/city', function(req, res) { var provinceId = req.query.province var cityList = [] switch(provinceId) { case '1': cityList = [ {id: 101, name: '北京市'}, {id: 102, name: '海淀区'}, {id: 103, name: '朝阳区'}, {id: 104, name: '东城区'}, {id: 105, name: '西城区'} ] break case '2': cityList = [ {id: 201, name: '上海市'}, {id: 202, name: '浦东新区'}, {id: 203, name: '徐汇区'}, {id: 204, name: '黄浦区'}, {id: 205, name: '静安区'} ] break case '3': cityList = [ {id: 301, name: '广州市'}, {id: 302, name: '深圳市'}, {id: 303, name: '珠海市'}, {id: 304, name: '佛山市'}, {id: 305, name: '东莞市'} ] break case '4': cityList = [ {id: 401, name: '长沙市'}, {id: 402, name: '株洲市'}, {id: 403, name: '湘潭市'}, {id: 404, name: '衡阳市'}, {id: 405, name: '邵阳市'} ] break default: break } res.json(cityList) }) ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值