vue-cli3使用路由和循环引入路由

1.安装路由；

npm install vue-router

2.使用：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.在vue-cli3项目中使用

(1)在 src 文件夹下，创建一个 router.js 文件，和 main.js 平级

(2)写入代码，引入所需的组件

import Vue from 'vue'
import Router from 'vue-router'
 
//import组件模块
import Login from './components/Login'
import Home from './components/Home'


Vue.use(Router)  //使用插件
 
export default new Router({
  mode: 'history',  // 在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头
  routes: [
    {
      path: '/',   //  定义为/会默认显示这个页面
      name: 'home',
      component: Home,
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
  ]
})

(3) 在main.js文件里面引用

(4)在APP.vue文件下面写上<router-view></router-view> 这是用来渲染通过路由映射过来的组件，当路径更改时，<router-view> 中的内容也会发生更改

(5)上面已经配置了两个路由，当打开 http://localhost:8080 或者 http://localhost:8080/login的时候，就会在 <router-view> 中渲染 Home.vue 组件和Login.vue

 4.如果我们要添加新路由组件就修改 router.js添加

 5，假如要添加10个新路由组件 或者100个，按照上面这样写，要累死；所以我们使用require.context循环加进来；

以下代码是组件都放在components目录下的，至于要引入其它目录下面的组件用require.context查找，然后拼接放进resultComps路由组件数组就行了

var resultComps = []
let requireComponent = require.context(
    './components', // 在当前目录下查找
    false, // 不遍历子文件夹
    /.vue$/ // 正则匹配 以 .vue结尾的文件
  )
requireComponent.keys().forEach(fileName => {

  let name = fileName.replace(/^./(.*).w+$/, '$1')  //正则匹配出组件名
  resultComps.push(
    {
      path: '/'+ (name=='Home' ? '' : name.toLowerCase()), //这个判断是等于home首页，路径就默认为/ ，toLowerCase是转小写函数
      name: name.toLowerCase(),
      component: () => import('./components/'+name),  //这是引入组件函数 等于import Login from './components/Login'
    }
  );

})

最终修改之后是这样的