VueJS路由自动化挂载

导言

此方案为懒人方案，在中大型项目开发中，个人认为是十分友好的。避免了一大撂的文件冲突，然Router的入口文件十分庞大，且可观性不强。采取自动化挂载方案后，只需要去维护好子级路由信息，无需在路由入口文件一个个添加、引入。一切交给自动化。

具体实现：

路由入口文件

个人习惯命名为/src/router/index.js，子级路由配置src/router/src下，具体的可根据自己项目的实际情况来定义。

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

let routes = []

// 将 src 文件夹下遍历得到的的路由文件，存储至routeFiles数组内

const routeFiles = require.context(

  './src',

  true,

  /.js$/

)

// 遍历数组，将路由文件内的路由数据合并至数组内

routeFiles.keys().forEach((key) => {

  routes = [...routes, ...routeFiles(key).default]

})

const router = new VueRouter({

  mode: 'history',

  routes

})

router.beforeEach((to, from, next) => {

  // 此处是为了避免同路由作死的点，导致Console报错。个人强迫症，可无视

  if (to.path === from.path) {

    return

  }

  next()

})

export default router

子级文件内容

export default [

  {

     path:"/xxx",

     name:"xxx",

     ...

  }

]

main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import './style/index.scss'

import './init'

import ELEMENTUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ELEMENTUI, { size: 'small', zIndex: 460 })

new Vue({

  router,

  render: (h) => h(App)

}).$mount('#app')

VueJS路由自动化挂载

导言

具体实现：

评论区

VueJS路由自动化挂载