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

Vue.use(VueRouter)

let routerList = []

function importAllRouter(r) {
  r.keys().forEach( keys => {
    routerList.push(r(keys).default)
  });
}

/**
 * 
 *  require.context  是webpack里面的方法  用于獲取文件   
 * 第一個參數(shù)是文件目錄  
 * 第二個參數(shù)是是否查看子目錄  
 * 第三個參數(shù)是什么類型的文件
 * 
 * */
importAllRouter( require.context( './', false,/\.router\.js/))

const routes = [
  ...routerList , // 解構(gòu)  注意這一步
  {
    path: '/',
    name: 'Home',
    component: () => import('views/Home/home')
  }
]

const router = new VueRouter({
  routes
})

export default router

export default {
	{
    path: '/index',
    name: 'index',
    component: () => import('views/index/index')，
    children:[

	]
  }
}

src
|   
-- router  路由目錄
    |
    ---- common.js          //通用路由：聲明通用路由
    ---- index.js           //導(dǎo)出相關(guān)配置
    ---- permission.js      //權(quán)限驗證
    ---- config            
           |
           ---- _import_development.js    //開發(fā)環(huán)境
           ---- _import_production.js     //生產(chǎn)環(huán)境
    ---- modules            //業(yè)務(wù)模塊
           |
           ---- index.js    //自動化處理文件：自動引入路由的核心文件
           ---- home.js     //路由1

/**
?* @return ?開發(fā)環(huán)境使用全量默認(rèn)加載
?*/
module.exports = file => require('@/views/' + file + '.vue').default

/**
?* @return ?生產(chǎn)環(huán)境使用懶加載
?*/
module.exports = file => () => import('@/views/' + file + '.vue')

const _import = require('./config/_import_' + process.env.NODE_ENV)

export default [
? // 默認(rèn)頁面
? {
? ? path: '/',
? ? redirect: '/index',
? },
? // 無權(quán)限頁面
? {
? ? path: '/nopermission',
? ? name: '無權(quán)限頁面',
? ? component: _import('NoPermission')
? },
? // 404
? {
? ? path: '*',
? ? name: '404',
? ? component: _import('404')
? }
]

const _import = require('../config/_import_' + process.env.NODE_ENV)
/**
?* 業(yè)務(wù)模塊home
?*/
export default [
? // 首頁
? {
? ? path: '/index',
? ? name: '首頁',
? ? component: _import('home/index'),
? ? meta: {
? ? ? keepAlive: false,
? ? ? requiresAuth: true // 要求驗證的頁面,在此情況下其子頁面也會被驗證.
? ? },
? }
]

modules下的index.js
/**
?* 自動化處理文件：自動引入路由的核心文件
?*/
const files = require.context('.', true, /\.js$/)

let configRouters = []
/**
?* inject routers
?*/
files.keys().forEach(key => {
? if (key === './index.js') return
? configRouters = configRouters.concat(files(key).default) // 讀取出文件中的default模塊
})
export default configRouters?

import Vue from 'vue'
import Router from 'vue-router'
import RouterModule from './modules' // 引入業(yè)務(wù)邏輯模塊
import RouterCommon from './common' // 引入通用模塊
 
import { routerMode } from '@/config/urls.js'
 
Vue.use(Router)
 
const router = new Router({
  mode: routerMode, // history模式需要服務(wù)端支持
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) { //如果savedPosition存在，滾動條會自動跳到記錄的值的地方
      return savedPosition
    } else {
      return { x: 0, y: 0 } //savedPosition也是一個記錄x軸和y軸位置的對象
    }
  },
  routes: [
    ...RouterCommon,
    ...RouterModule,
  ]
})
 
export default router

import Vue from 'vue'
import router from './index'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({
? easing: 'ease', // 動畫方式 ? ?
? speed: 500, // 遞增進度條的速度 ? ?
? showSpinner: false, // 是否顯示加載ico ? ?
? trickleSpeed: 200, // 自動遞增間隔 ? ?
? minimum: 0.3 // 初始化時的最小百分比
})

const cancelAxios = (next) => {
? let axiosPromiseArr = window.__axiosPromiseArr;
? if (!!axiosPromiseArr && axiosPromiseArr.length) {
? ? // console.log(axiosPromiseArr);
? ? let len = axiosPromiseArr.length;
? ? while (len--) { //從后向前終止請求，并刪除 cancelToken，避免數(shù)組索引帶來的問題
? ? ? axiosPromiseArr[len].cancel('cancel');
? ? ? axiosPromiseArr.splice(len, 1);
? ? }
? ? //或者：window.__axiosPromiseArr = [];
? }
? next();
}

router.beforeEach((to, from, next) => {
? // 每次切換頁面時，調(diào)用進度條
? NProgress.start();
? if (to.matched.some(record => record.meta.requiresAuth)) { // 哪些需要驗證
? ? if (!sessionStorage.getItem("token")) { // token存在條件 ??
? ? ? next({
? ? ? ? path: '/nopermission', // 驗證失敗要跳轉(zhuǎn)的頁面
? ? ? ? query: {
? ? ? ? ? redirect: to.fullPath // 要傳的參數(shù)
? ? ? ? }
? ? ? })
? ? } else {
? ? ? cancelAxios(next);
? ? }
? } else {
? ? cancelAxios(next);
? }
})

router.afterEach((to, from) => {
? // 在即將進入新的頁面組件前，關(guān)閉掉進度條
? NProgress.done()
? document.title = to.name || ''
})

export default router

import router from './router/permission'

new Vue({
? el: '#app',
? router,
? components: { App },
? template: '<App/>'
})