博客地址: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. CI中的数据库操作

    转载于:http://blog.sina.com.cn/s/blog_76e7bdba01016p2p.html CI中第一次连接数据库,在控制器或模型的构造函数里输入以下语句 $this->l ...

  2. 谷歌黑科技WaveNet,更先进的语音合成

    导读 Google 的 DeepMind 研究实验室昨天公布了其在计算机语音合成领域的最新成果——WaveNet.该语音合成系统能够模仿人类的声音,生成的原始音频质量优于目前的文本转语音系统(text ...

  3. 【Java 基础篇】【第五课】类的构造函数

    Java 也有自己的构造函数,如同c++一样有两个特征: 1.构造函数的名字和类的名字相同 2.构造函数没有返回值 下面来看一下这个例子: public class test { public sta ...

  4. 30天,APP创业从0到1【7.11郑州站】

    活动概况 时间:2015年07月11日13:30-16:30 地点:慧谷咖啡(郑州杨金路9号河南外包产业园天元W栋) 主办:APICloud.环信.河南中医药大学医药信息化实验室 网址:www.api ...

  5. ①创建项目testpackage ②在pack2.B中添加方法f ③在类A中添加如下三个成员变量:int型的私有变量i float型的变量f double型的公有变量d 在pack1.B的main方法中为对象a的成员变量f和d分别赋值为2和3 在pack2.C的main方法中为对象a的成员变量d赋值为3

    package pack1; public class A { private int i; float f; public double d; public float getF() { retur ...

  6. PhoneGap API Documentation API Reference

    API Reference-API参考 Accelerometer-加速度计 Tap into the device's motion sensor.-点击进入该设备的运动传感器. Camera-相机 ...

  7. Unity3D-第一视角射击游戏

    一.新建关卡 File,Save Scene,File,New Scene,File,Save Scene as... ,Level02.unity 1.建立场景 从Assets中拖放场景模型到Hie ...

  8. JS 获取星期几的四种写法

    今天是星期几的4种JS代码写法,有需要的朋友可以参考一下 第一种写法 复制代码代码如下: var str = "";  var week = new Date().getDay() ...

  9. MySQL 存储过程例子,不能在if else里面用begin end否则会报错Error Code : 1064!

    Error Code : 1064 You have an error in your SQL syntax; check the manual that corresponds to your My ...

  10. express创建网站

    Express 在初始化一个项目的时候需要指定模板引擎,默认支持Jade和ejs. 这里我们使用ejs模板引擎:(关于ejs的介绍可以先从百科里面了解一个大概)EJS是一个JavaScript模板库, ...