Vue路由模块化

wade

发布于 2020-06-24 16:48:48

7700

发布于 2020-06-24 16:48:48

文章被收录于专栏：coding个人笔记coding个人笔记

之前的项目从来没有对路由进行模块化，很早之前一个同学发过一个项目，我当时看了路由，觉得很不错，那就是进行了模块化，只是都没去认真了解一下。今天分享个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等，也尽量都模块化。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-06-18，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack