Procesamiento Modular Vue - Enrutamiento

prefacio

        Cuando configuramos rutas en vue, si hay menos rutas, podemos configurarlas directamente en router/index.js, pero si el proyecto en cuestión es grande y hay muchos módulos, escribir directamente en index.js dará como resultado archivos grandes y poca escalabilidad y dificultades de mantenimiento, etc., entonces podemos modularizar el enrutamiento

solución

        Escriba las rutas bajo diferentes módulos en diferentes archivos para exportar y luego impórtelos en el archivo index.js, como se muestra en la siguiente figura:

        

    Introduzca los archivos de enrutamiento en todos los módulos en el archivo index.js

import Vue from "vue"
import Router from "vue-router"

// 解决路由重复
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push(to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

// 声明你的主路由
export let constantRoutes = [
  {
    path: "/",
    name:"home:,
    component: Layout,
    order:9999
  }  
]

// 模块文件处理，将modules下的所有js文件读取出来，并生成数组
const modulesFiles = require.context("./modules", true, /\.js$/)
const modules = modulesFiles.keys().reduce((prev, cur) => {
  prev.push(modulesFiles(cur).default)
  return prev
}, [])

//然后加入到主路由中
constantRoutes = [...constantRoutes , ...modules ]

//还可以根据order由大到小进行路由排序使路由顺序可以更改
 constantRoutes =  constantRoutes.sort((a, b) => {
    return (a?.meta?.order || 9999) - (b?.meta?.order || 9999)
  })

const router = new Router({
  routes: constantRoutes,
  mode: "history"
})

Vue.use(Router)
export default router

      Según este método, también podemos modularizar el registro de componentes globales, el desarrollo de complementos de vue, etc., sin necesidad de registrarlos o introducirlos individualmente.