vue模块化处理-路由篇

前言

        我们在vue中配置路由时如果路由较少,可以直接在router/index.js中配置,但如果涉及项目较大,模块较多,如果在index.js直接写会导致文件较大,扩展性差, 且维护困难等问题,那么我们就可以将路由进行模块化处理

解决方案

        将不同模块下的路由写在不同的文件中导出,然后在index.js文件中引入,如下图所示:

        

    index.js文件中引入所有modules下的路由文件

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, /\.j
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值