electron-vueのルーティングで盛大にハマった

こちら（ElectronでVue.jsを始める）の記事を参考に、Electronアプリを作成。
しかし、helloページの追加ができずに苦戦した話です。

結果的に、routes.jsの初歩的なミスが原因でした。

2017/02/12時点ではelectron-vueが上記の記事の時点からアップデートされているらしく、app/src配下にmainとrendererというディレクトリができている。
これのせいで色々と疑ってしまい、時間がかかってしまいました。

renderer配下のcomponentsにHello.vueを追加、routes.jsに

routes.js

  {
    path: '/hello',
    name: 'hello-page',
    component: require('components/Hello')
  },

を追加したつもりが、動かない。
原因は

routes.js

  {
    path: '*',
    redirect: '/'
  }

よりも下にhello-pageへのルーティングを書いてしまっていたからでした。

上から読み込んで当てはまった順にルーティングさせるのね。

routes.js

export default [
  {
    path: '/',
    name: 'landing-page',
    component: require('components/LandingPageView')
  },
  {
    path: '/hello',
    name: 'hello-page',
    component: require('components/Hello')
  },
  {
    path: '*',
    redirect: '/'
  }
] 

結果的に、このようにしたところうまくいきました。

なんかこんなことでものすごく時間を使ってしまって恥ずかしい。。。