Vue路由模块化

之前的项目从来没有对路由进行模块化,很早之前一个同学发过一个项目,我当时看了路由,觉得很不错,那就是进行了模块化,只是都没去认真了解一下。今天分享个vue的路由模块化。

我们用脚手架生成一个项目之后,默认就会有router文件夹,里面只有index.js,这时候我们就可以新建几个模块的路由,比如用户模块、商品模块、默认模块的js,然后每个模块里面配置属于这个模块的路由:

index.router.js:

export default [
    {
        path: '/home',
        name: 'Home',
        component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
        path: '*',
        name: '404',
        component: () => import(/* webpackChunkName: "404" */ '../views/404.vue')
    },
]

user.router.js:

export default [
    {
        path: '/login',
        name: 'Login',
        component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue')
    },
    {
        path: '/register',
        name: 'Register',
        component: () => import(/* webpackChunkName: "register" */ '../views/Register.vue')
    },
]
component: () => import(/* webpackChunkName: "register" */ '../views/Register.vue')

这种语法是动态导入的语法,当访问这个页面路由的时候才去加载这个组件,webpackChunkName是打包之后生成的chunk的名字。然后*是配置404页面使用的,之前居然都不知道这个东西。

接着就是在入口文件也就是index.js里面把模块加载变成一个数组:

const routes = [];
const files = require.context('./', false, /\.router.js$/);
files.keys().forEach(key => {
  routes.push(...files(key).default);
});

之前都是写在这个routes数组里面,现在通过require.context直接加载文件内容,这个语法是webpack提供的,只有webpack能用。模块命名都加了router主要是给这个语法使用,可以通过正则匹配,完全可以不使用这个。

404那个页面不需要单独拿出来到routes最后push,因为VueRouter内部会帮我们放到最后去。

Vue的路由模块化是真的简单,只是自己之前都没想着去做这些事,现在想想,还真的得做,不然页面几十几百个的时候,index.js越来越多,并不是很好维护。

其实不只是vue路由,包括其他地方,比如vuex等,也尽量都模块化。

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:coding个人笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6之正则的扩展

    var reg = new RegExp(/a/g, i);这是错误的,ES6是允许的,且第二个参数会覆盖之前的模式。

    wade
  • 初识promise

    new Promise( function(resolve, reject) { } );

    wade
  • Vuex之module

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

    wade
  • 【分享】解决新的ZCU106单板运行helloworld异常的问题

    客户收到新买的ZCU106,运行Xilinx的linux正常。使用的Xilinx SDK 2018.3调试自己创建的helloworld时却出现异常,程序跑飞。

    hankfu
  • AndroidImageSlider实现炫酷轮播广告效果

    本文实例为大家分享了AndroidImageSlider实现炫酷轮播广告的具体代码,供大家参考,具体内容如下

    砸漏
  • 手把手教你如何优化linux服务器

    服务器的优化是我们最小化安装系统后应该做的事情,下面是一些常见的基本的优化服务器的方法。关闭不需要的服务。列出需要启动的的服务crond、network、ssh...

    潘嘉兴
  • 关于SMP

    多核在嵌入式实时系统里应用的越来越多,而VxWorks从6.6开始支持多核,到6.8就算支持的不错了。风河提供了两种多核技术:Symmetric multipr...

    Taishan3721
  • 夏宇闻著作:从算法设计到硬线逻辑的实现

    在数字信号处理的领域内有相当大的一部分工作是可以事后处理的。我们可以利用通用的计算机系统来处理这类问题。如在石油地质调查中,我们通过钻探和一系列的爆破,记录下各...

    碎碎思
  • Stack Stracture

    Because stack是Last in first out. 因此数组的index是0最适合做栈底, 因为变化最小

    CoffeeLand

扫码关注云+社区

领取腾讯云代金券