Vue.jsでちょっとおしゃんてぃなimport

はじめに

いなたつアドカレの四日目の記事です。

今回はVue.jsで使えるちょっとかっこつけたおしゃんてぃなimport方法について書いてくぜ

じっそー

router.js

const loadView = view => () => import(`./views/${view}.vue`)

export default new Router({
  
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: loadView('Home')
    },
    {
      path: '/about',
      name: 'about',
      component: loadView('About')
    }
  ]
})

こんなかんじですね、前提として、viewに関するファイルがviewsディレクトリにまとまっているとおもってください。

loadViewで引数viewを受けて無名関数を高階的にimportする関数を返却しています。
これで、import文を別に何度も書く必要がなく、importすることができ、すこしおしゃんてぃな感じが醸し出せます。