vue 自动生成路由，path和name默认去除index

我会带着你远行 2023-03-01 13:26 5阅读 0赞

![在这里插入图片描述][20200726172219677.png]  
**router.js**

/**
     * 规则：
     * 一、例如：index/index，shop/index以index结尾的，path和name默认去除index
     * 二、例如：shop/list，默认生成name为shop_list（如果结尾为index，例如shop/index则是shop）
     * 三、填写后不会自动生成
     * **/
    let routes = [{ 
        redirect: { 
          name: 'index'
        },
        // component: () => import('../../views/layout.vue'),
        component: 'layout',
        children: [{ 
            component: 'index/index',
            meta: { 
              title: '后台首页'
            }
          },
          { 
            component: 'shop/goods/list',
            meta: { 
              title: '商品列表'
            }
          },
          { 
            component: 'isimage/index',
            meta: { 
              title: '相册管理'
            }
          },
          { 
            component: 'shop/category/list',
            meta: { 
              title: '分类列表'
            }
          },
    
        ]
      },
      { 
        component: 'login/index',
        meta: { 
          title: '登录页'
        }
      },
      { 
        path: '*',
        redirect: { 
          name: 'index'
        }
      }
    ]
    // 获取路由信息方法
    let getRoutes = function () { 
      // 生成路由详细信息
      createRoute(routes)
      return routes
    }
    // 自动生成路由
    function createRoute(arr) { 
      for (let i = 0; i < arr.length; i++) { 
        if (!arr[i].component) return
        // 去除index
        let val = getValue(arr[i].component)
        // 生成name
        arr[i].name = arr[i].name || val.replace(/\//g, '_')
        // 生成path
        arr[i].path = arr[i].path || `/${ val}`
        // 自动生成component
        let componentFun = import(`../../views/${ arr[i].component}.vue`)
        arr[i].component = () => componentFun
        if (arr[i].children && arr[i].children.length > 0) { 
          createRoute(arr[i].children)
        }
      }
    }
    
    // 去除index
    function getValue(str) { 
      // str = login/index
      // 获取最后一个/的索引
      let index = str.lastIndexOf('/')
      // 获取最后一个/后面的值
      let val = str.substring(index + 1, str.length)
      // 判断是不是index结尾
      if (val === 'index') { 
        return str.substring(index, -1)
      }
      return str
    }
    export default getRoutes()

![在这里插入图片描述][20200726172446450.png]

import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    import routes from "@/common/config/router.js"
    export default new VueRouter({ 
      routes
    })

[20200726172219677.png]: /images/20230208/e86aa8de7e3c40cd97a55f74e832d711.png
[20200726172446450.png]: /images/20230208/5ab4fe486da4407ebee2f125f036689d.png