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/>'
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
相关文章
Lana
2020-03-12
Abina
2021-05-24
Claire
2021-05-21
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Vala
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20
Fern
2023-07-20
Nicole
2023-07-20
Oria
2023-07-21
Maleah
2023-07-21
Hellens
2023-07-21
Tanisha
2023-08-08