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等，也盡量都子產品化。