vue自动配置路由

vue自动配置路由

• 使用路由的传统方法

  import Home from '@/pages/home'
  import My from '@/pages/my'
  ......
  配置到routes中
  {
              path:'/home',
              name:'Home',
              component: Home
   },
   {
   		   path:'/my',
              name:'My',
              component: My
   },
   .....
   访问 /home,/my
  

• 配置自动引入路由，无需每个路由import

  • 新建js文件，ex:autoRoute.js

  • js代码

    let autoRoutes = []
    let contexts = require.context('@/pages',true,/\.vue$/)
    contexts.keys().forEach(item => {
        // 排除page下的components组件
        if(item.indexOf('components') == -1) {
            let name = item.replace('./','').replace('/index.vue','').replace('.vue','').replace(/\//g,'-')
            let path = item.replace('./','/').replace('/index.vue','').replace('.vue','')
            let src = item.replace('./','')
            autoRoutes.push({
                path:path,
                name:name,
                component(resolve){
                    require([`@/pages/${src}`],resolve)
                }
            })
        }
    });
    
    export default autoRoutes
    

  • /router/index.js中引入

    import autoRoute from './autoRoute'
    export default new Router({
        routes: [
            ...autoRoute
        ]
    })
    

  • 使用

    /home,/my,....