vue-routerのbeforeEachを書く場所

Question

vue-routerにてbeforeEachを使う場合、以下のように使われるかと思います。

const router = new Router({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  ...
})

export default router

これできちんと動いているので問題はないのです。
しかし、私は初めvue-cliからできるひな形(以下のbeforeEachの部分を書いていない状態)にbeforeEachメソッドを追加すればいけるやろ、と思って以下のようにやってみましたがうまくいきませんでした。

export default new Router({
  routes: [...],
  beforeEach (to, from, next) => {
    ...
  }
})

VueだけでなくJavaScriptに関しても初心者のため、なぜ下がうまく動かないのかがよくわからないのです。
ご教授いただけませんか。よろしくお願いいたします。

Answer 1

私も以前同じことを考えてやってみたことがあります。

https://github.com/vuejs/vue-router/blob/dev/src/index.js#L35
vue-router のコンストラクタは RouterOptions という型で定義されたデータを受け取ります。

そして RouterOptions の型の定義はこのようになっています。
https://github.com/vuejs/vue-router/blob/dev/types/router.d.ts#L49-L63

beforeEach は RouterOptions の定義に存在しないのでvue-routerのコンストラクタは何もしないというわけです。

Comments

[kamome283]

ソースまで提示して頂きありがとうございます。
おかげさまですっきりとしました。
コンストラクタで定義されていないのなら、使われるはずがないというのは完全に頭から抜け落ちてました。
出来のいいフレームワークやライブラリを使っていると、色々うまく面倒見てくれるために言語の基礎的な部分まで忘れてしまいます????