vue路由劃分模塊并自動引入方式
更新時間：2022年10月09日 16:48:16 作者：碼齡1年零5個月
這篇文章主要介紹了vue路由劃分模塊并自動引入方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
路由劃分模塊并自動引入
創(chuàng)建路由文件
主路由文件index.js 內(nèi)容，這樣配置后只要在router目錄下按照xxx.router.js的格式創(chuàng)建路由文件，就可以自動加入到路由容器中
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:[
]
}
}vue-router模塊劃分問題
路由整體結(jié)構(gòu)
路由拆分指的是將路由的文件，按照模塊(modules)拆分，這樣方便路由的管理，更主要的是方便多人開發(fā)。具體要不要拆分，那就要視你的項(xiàng)目情況來定了，如果項(xiàng)目較小的話，也就一二十個路由，那么是拆分是非常沒必要的。但倘若你開發(fā)一些功能點(diǎn)較多的商城項(xiàng)目，路由可以會有一百甚至幾百個，那么此時將路由文件進(jìn)行拆分是很有必要的。
src
|
-- router 路由目錄
|
---- common.js //通用路由：聲明通用路由
---- index.js //導(dǎo)出相關(guān)配置
---- permission.js //權(quán)限驗(yàn)證
---- config
|
---- _import_development.js //開發(fā)環(huán)境
---- _import_production.js //生產(chǎn)環(huán)境
---- modules //業(yè)務(wù)模塊
|
---- index.js //自動化處理文件：自動引入路由的核心文件
---- home.js //路由11、區(qū)分線上和開發(fā)環(huán)境---config
開發(fā)環(huán)境使用懶加載會導(dǎo)致熱更新，導(dǎo)致更新變慢，所以開發(fā)環(huán)境使用全量默認(rèn)加載，生產(chǎn)環(huán)境使用懶加載
1）_import_development.js
/**
?* @return ?開發(fā)環(huán)境使用全量默認(rèn)加載
?*/
module.exports = file => require('@/views/' + file + '.vue').default2）_import_production.js
/**
?* @return ?生產(chǎn)環(huán)境使用懶加載
?*/
module.exports = file => () => import('@/views/' + file + '.vue')2、通用路由---common.js
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')
? }
]3、業(yè)務(wù)模塊---modules
以home.js為例
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 // 要求驗(yàn)證的頁面,在此情況下其子頁面也會被驗(yàn)證.
? ? },
? }
]業(yè)務(wù)模塊導(dǎo)出（關(guān)鍵部分）：
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、導(dǎo)出所有---index.js
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 router5、權(quán)限驗(yàn)證---permission.js
import Vue from 'vue'
import router from './index'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({
? easing: 'ease', // 動畫方式 ? ?
? speed: 500, // 遞增進(jìn)度條的速度 ? ?
? 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)用進(jìn)度條
? NProgress.start();
? if (to.matched.some(record => record.meta.requiresAuth)) { // 哪些需要驗(yàn)證
? ? if (!sessionStorage.getItem("token")) { // token存在條件 ??
? ? ? next({
? ? ? ? path: '/nopermission', // 驗(yàn)證失敗要跳轉(zhuǎn)的頁面
? ? ? ? query: {
? ? ? ? ? redirect: to.fullPath // 要傳的參數(shù)
? ? ? ? }
? ? ? })
? ? } else {
? ? ? cancelAxios(next);
? ? }
? } else {
? ? cancelAxios(next);
? }
})
router.afterEach((to, from) => {
? // 在即將進(jìn)入新的頁面組件前，關(guān)閉掉進(jìn)度條
? 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/>'
})以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
作為使用Vue的開發(fā)者，我們對Vue指令一定不陌生，諸如v-model、v-on、等，同時Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時間開心的摸魚2023-04-04
Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。這篇文章給大家介紹了Vue.js教程之計算屬性，非常不錯，感興趣的的朋友一起看看吧2016-11-11
這篇文章主要為大家詳細(xì)介紹了Vue.js數(shù)據(jù)綁定之data屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
VUE項(xiàng)目實(shí)現(xiàn)全屏顯示功能之screenfull用法
這篇文章主要介紹了VUE項(xiàng)目實(shí)現(xiàn)全屏顯示功能之screenfull用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue devtools的安裝與使用教程,需要的朋友可以參考下2018-08-08
淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty
本篇文章主要介紹了淺談vue實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的相關(guān)資料,在使用Vue.js開發(fā)單頁面應(yīng)用時常常會遇到路由跳轉(zhuǎn)傳參的需求,需要的朋友可以參考下2023-07-07
vue項(xiàng)目中在外部js文件中直接調(diào)用vue實(shí)例的方法比如說this
這篇文章主要介紹了vue項(xiàng)目中在外部js文件中直接調(diào)用vue實(shí)例的方法比如說this,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue組件化開發(fā)的思考以及相關(guān)的原理介紹，如果你對此有興趣，可以學(xué)習(xí)參考下。2018-02-02
gizp壓縮是一種http請求優(yōu)化方式，通過減少文件體積來提高加載速度。這篇文章主要介紹了Vue CLI3 開啟gzip壓縮,需要的朋友可以參考下2018-09-09