vue路由划分模块并自动引入方式

目录 路由划分模块并自动引入 创建路由文件 vue-router模块划分问题 路由整体结构 1、区分线上和开发环境---config 2、通用路由---common.js 3、业务模块---modules 4、导出所有---index.js 5、权限验证---permission.js

路由划分模块并自动引入

创建路由文件

主路由文件index.js 内容，这样配置后只要在router目录下按照xxx.router.js的格式创建路由文件，就可以自动加入到路由容器中

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里面的方法  用于获取文件   
 * 第一个参数是文件目录  
 * 第二个参数是是否查看子目录  
 * 第三个参数是什么类型的文件
 * 
 * */
importAllRouter( require.context( './', false,/\.router\.js/))

const routes = [
  ...routerList , // 解构  注意这一步
  {
    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:[

	]
  }
}

vue-router模块划分问题

路由整体结构

路由拆分指的是将路由的文件，按照模块(modules)拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。但倘若你开发一些功能点较多的商城项目，路由可以会有一百甚至几百个，那么此时将路由文件进行拆分是很有必要的。

src
|   
-- router  路由目录
    |
    ---- common.js          //通用路由：声明通用路由
    ---- index.js           //导出相关配置
    ---- permission.js      //权限验证
    ---- config            
           |
           ---- _import_development.js    //开发环境
           ---- _import_production.js     //生产环境
    ---- modules            //业务模块
           |
           ---- index.js    //自动化处理文件：自动引入路由的核心文件
           ---- home.js     //路由1

1、区分线上和开发环境---config

开发环境使用懒加载会导致热更新，导致更新变慢，所以开发环境使用全量默认加载，生产环境使用懒加载

1）_import_development.js

/**
?* @return ?开发环境使用全量默认加载
?*/
module.exports = file => require('@/views/' + file + '.vue').default

2）_import_production.js

/**
?* @return ?生产环境使用懒加载
?*/
module.exports = file => () => import('@/views/' + file + '.vue')

2、通用路由---common.js

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

export default [
? // 默认页面
? {
? ? path: '/',
? ? redirect: '/index',
? },
? // 无权限页面
? {
? ? path: '/nopermission',
? ? name: '无权限页面',
? ? component: _import('NoPermission')
? },
? // 404
? {
? ? path: '*',
? ? name: '404',
? ? component: _import('404')
? }
]

3、业务模块---modules

以home.js为例

const _import = require('config/_import_' + process.env.NODE_ENV)
/**
?* 业务模块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?

4、导出所有---index.js

import Vue from 'vue'
import Router from 'vue-router'
import RouterModule from './modules' // 引入业务逻辑模块
import RouterCommon from './common' // 引入通用模块
 
import { routerMode } from '@/config/urls.js'
 
Vue.use(Router)
 
const router = new Router({
  mode: routerMode, // history模式需要服务端支持
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方
      return savedPosition
    } else {
      return { x: 0, y: 0 } //savedPosition也是一个记录x轴和y轴位置的对象
    }
  },
  routes: [
    ...RouterCommon,
    ...RouterModule,
  ]
})
 
export default router

5、权限验证---permission.js

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，避免数组索引带来的问题
? ? ? axiosPromiseArr[len].cancel('cancel');
? ? ? axiosPromiseArr.splice(len, 1);
? ? }
? ? //或者：window.__axiosPromiseArr = [];
? }
? next();
}

router.beforeEach((to, from, next) => {
? // 每次切换页面时，调用进度条
? NProgress.start();
? if (to.matched.some(record => record.meta.requiresAuth)) { // 哪些需要验证
? ? if (!sessionStorage.getItem("token")) { // token存在条件 ??
? ? ? next({
? ? ? ? path: '/nopermission', // 验证失败要跳转的页面
? ? ? ? query: {
? ? ? ? ? redirect: to.fullPath // 要传的参数
? ? ? ? }
? ? ? })
? ? } else {
? ? ? cancelAxios(next);
? ? }
? } else {
? ? cancelAxios(next);
? }
})

router.afterEach((to, from) => {
? // 在即将进入新的页面组件前，关闭掉进度条
? NProgress.done()
? document.title = to.name || ''
})

export default router

使用方式：

main.js

import router from './router/permission'

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue路由划分模块并自动引入方式的详细内容...