博客地址:https://ainyi.com/77

企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化

分享两个解决方案 —— Vue 路由配置的模块化(==Plan A== and ==Plan B==)

注册需要

首先路由注册需要啥

// main.js

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

// 这里的 router 是这样的
export default new Router({
  mode: 'history',
  routes: [],
  ... // 其他配置
})

也就是说注册需要 new 一个 Router 实例,实例里的 routes 是数组,里面配置每个页面的路由

模块拆分(Plan A)

src 下 router 的目录结构

---src
----router
------modules
--------xxxx.js // 模块 xxx
--------other.js // 模块 other
------index.js // 路由配置入口和出口 index

例如

然后配置 modules 里面模块路由

// 配置 other
import err from '@/views/others/Error.vue'
export default function(router) {
  router.push({
    path: '/error',
    name: 'error',
    component: err
  })
}
// 配置 accoutReport
export default function(router) {
  router.push({
    path: '/accout-report',
    redirect: '/accout-report/list'
  })
  // 列表
  router.push({
    path: '/accout-report/list',
    name: 'list',
    component: () => import('@/views/accoutReport/List.vue')
  })
  // 新增
  router.push({
    path: '/accout-report/create',
    name: 'create',
    component: () => import('@/views/accoutReport/Create.vue')
  })
  // 编辑
  router.push({
    path: '/accout-report/edit/:id',
    name: 'edit',
    component: () => import('@/views/accoutReport/steps/CreateStep2.vue')
  })
  // 详情
  router.push({
    path: '/accout-report/detail/:id',
    name: 'detail',
    component: () => import('@/views/accoutReport/Detail.vue')
  })
}

如有其他模块,依次像上面一样配置

关键是路由配置入口出口文件 index.js

// index.js
import Vue from 'vue'
import Router from 'vue-router'
import App from '@/views/Layouts.vue'
import otherRouter from '@/router/modules/others'
import accoutReport from '@/router/modules/accoutReport'
// import store from '@/stores'
Vue.use(Router)

let routes = []

let rootRouter = {
  path: '/',
  component: App,
  children: [],
  redirect: '/accout-report/list'
}

let redirectRouter = {
  path: '*',
  redirect: '/error'
}

otherRouter(rootRouter.children)
accoutReport(rootRouter.children)
// 如有多个模块,依次在这里配置

const router = new Router({
  mode: 'history',
  routes: routes.concat([rootRouter, redirectRouter])
})
export default router

上述代码,除了 other,所有页面路由配置在 rootRouter 的 children 下面,有一个父级 router 包裹着

代码都看得懂,这里就不多说哈~

最后在 main.js 中注册

模块拆分(Plan B)

该方法较为难懂一些,可以看看

目录结构跟 Plan A 类似,不过在 src 下多了一个 router.js 配置文件作为路由出口文件

src 下 router 的目录结构

---src
----router
------modules
--------xxxx.js // 模块 xxx
--------other.js // 模块 other
------index.js // 路由配置中转文件
----router.js // 路由配置出口文件

例如

模块 modules 里文件配置

// order.js
import { getFindBusinessServiceList } from '@/utils/config-utils'

const OrderRouter = [
  {
    path: '/',
    redirect: '/cost/order-list'
  },
  {
    path: '/cost',
    component: () => import('@/views/Layouts'),
    redirect: '/cost/order-list',
    children: [
      {
        path: 'order-list',
        component: () => import('@/views/orderManagement/List'),
        beforeEnter: async (to, from, next) => {
          await getFindBusinessServiceList() // 进入该路由前异步请求,结束后进入该路由
          next()
        }
      },
      {
        path: 'order-detail',
        component: () => import('@/views/orderManagement/Detail')
      },
      // 下面是重定向,可不配置
      {
        path: 'orderDetail',
        redirect: 'order-detail'
      },
      {
        path: 'order',
        redirect: 'order-list'
      }
    ]
  }
]
export default OrderRouter

上述路由配置在 Layouts 路由下的 children

接下来关键,路由配置中转文件 index.js
遍历 modules 文件夹下的每个模块文件,赋值和导出

// index.js
import { camelCase } from 'lodash-es'
const requiredModules = require.context('./modules', false, /\.js$/)
const routers = {}

requiredModules.keys().forEach(fileName => {
  // 不加载index.js
  if (fileName === './index.js') return
  // 转为驼峰命名
  const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, ''))

  routers[moduleName] =
    requiredModules(fileName).default || requiredModules(fileName)
})
export default routers

然后在 src 下的出口文件 router.js 包装

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import routers from '@/routers/index'
Vue.use(Router)
let routes = []
Object.values(routers).forEach(router => {
  routes.push(...router)
})

export default new Router({
  mode: 'history',
  routes
})

最后在 main.js 中注册

博客地址:https://ainyi.com/77

Vue 路由模块化配置的更多相关文章

  1. vue路由的配置

    一.准备工作 1安装vue-cli  npm install vue-cli -g 2检查是否安装成功 vue -V(大写V) 3初始化一个新的项目 vue init  webpack vue-dem ...

  2. Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套

    vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...

  3. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  4. vue路由详解

    自己看vue文档,难免有些地方不懂,自己整理一下,主要是vue-router具体实现的操作步骤. 安装 直接下载/CDN https://unpkg.com/vue-router/dist/vue-r ...

  5. 14.vue路由&amp;脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  6. react中的路由模块化

    在vue中,可以将路由单独写在一个配置文件中,便于整理维护,而在前面总结整理的react中,都是直接将路由配置放在需要使用的地方,少数的时候话可以接受,但是当项目做大,这种方式就不再被推荐了,我们再r ...

  7. 初印象至Vue路由

    初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...

  8. vue路由的简单实例

    vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...

  9. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  10. vue路由

    vue-router 现在的应用都流行SPA应用(single page application) 传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候受网络 ...

随机推荐

  1. 基于K2 BPM平台,中原地产实现了从2个人到5万多人的跨越

    演讲人:吴付文 中原地产CIO 点击这里查看中原地产怎么使用BPM实现业绩的飞跃式发展.

  2. php获取客户端ip get_client_ip()

    php获取客户端ip get_client_ip() function get_client_ip(){if (getenv("HTTP_CLIENT_IP") && ...

  3. 转:推荐!国外程序员整理的 C++ 资源大全

    原文来自于:http://blog.jobbole.com/78901/ 关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz 发起和维护. 内容包括:标准库.Web应用框架.人工智能.数据 ...

  4. Android学习笔记--Broadcast, BroadcastReceiver(广播)

    参考资料:http://www.cnblogs.com/playing/archive/2011/03/23/1992030.html 在 Android 中使用 Activity, Service, ...

  5. ui原则

    http://www.niushe.com/news/show-3683.html 设计师Joshua Porter发表了一篇文章——<Principles of User Interface ...

  6. ios常用的框架(源自知乎上的回答)

    首先,学习这类开源项目的主要目的是为了实现产品汪需求,如果不是这个目的,完全可以看Explore GitHub,当前最火的开源项目都在这里,当然你需要过滤一下语言. 好了,介绍几个希望能帮助到你. 普 ...

  7. LDA,PCA阅读资料

    1,线性判别分析(Linear Discriminant Analysis)(一) 2,机器学习中的数学(4)-线性判别分析(LDA), 主成分分析(PCA) 3,Machine Learning i ...

  8. [HNOI 2013]游走

    Description 题库链接 一个无向连通图,顶点从 \(1\) 编号到 \(N\) ,边从 \(1\) 编号到 \(M\) . 小Z在该图上进行随机游走,初始时小Z在 \(1\) 号顶点,每一步 ...

  9. Nginx 配置HTTPS 与Node.js 配置HTTPS方法

    前段时间公司网站要求加上HTTPS安全CA证书,公司服务器全是阿里云服务器,并且配有负载均衡,所以选择直接在阿里云购买CA证书,阿里云有一种证书可以免费试用一年,决定申请此证书,阿里云证书需要验证,阿 ...

  10. NEERC训练实录

    听说这里可以做一些idea比较好的题.. 那就做做吧 2017-2018 ACM-ICPC, NEERC, Northern Subregional Contest A. Auxiliary Proj ...