Vue.jsで、router is not definedと怒られる

Question

rails(API)と、vuejsと、webpackerを使って認証機能を実装中です。
Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiitaを参考にさせていただき、firebaseにemailとパスワードが保存されるように実装できました。
そこで、ログインしてないユーザーはホーム画面に遷移させるように、vuerouterの設定をしていました。
記事通りに、router.jsにRouter.beforeEachの設定を書いたところ、下記のエラー文が出てきました。
Router is not definedと出ていますが、vuerouterはちゃんと読み込んでるはずです。どこが原因かわからず質問させていただいた次第です。
ご教示のほど、よろしくお願いいたします。

router.js:33 Uncaught ReferenceError: Router is not defined
    at Module../app/javascript/router/router.js (router.js:33)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/application.js (application.js:1)
    at __webpack_require__ (bootstrap:19)
    at Object.1 (log.js:56)

とエラーが出てきてきました。エラーに該当するファイルは下記になります。

# router.js

import Vue from "vue";
import VueRouter from "vue-router";
import MusicHome from "../pages/MusicHome.vue";
import MusicCreate from "../pages/MusicCreate.vue";
import MusicEdit from "../pages/MusicEdit.vue";
import MusicSearch from "../pages/MusicSearch.vue";
import MusicSearchResult from "../pages/MusicSearchResult.vue";
import SignUp from "../pages/SignUp.vue";
import SignIn from "../pages/SignIn.vue";
import firebase from '../plugins/firebase'

Vue.use(VueRouter);
// Vue.use(VuePaginate);

const routes = [
  {
    path: '*',
    redirect: 'signin'
  },
  { path: "/", name: "MusicHome",meta: { requiresAuth: true }, component: MusicHome },
  { path: "/create", name: "MusicCreate", component: MusicCreate },
  { path: "/edit/:id", name: "MusicEdit", component: MusicEdit },
  { path: "/search", name: "MusicSearch", component: MusicSearch },
  {
    path: "/result/:keyword",
    name: "MusicSearchResult",
    component: MusicSearchResult,
  },
  { path: "/signup", name: "signup", component: SignUp },
  { path: "/signin", name: "signin", component: SignIn },
];

Router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // すでに認証済みの場合は遷移
    if (firebase.auth().currentUser) {
      next()
      return
    }
    // まだ認証されていない場合は Firebase SDK からのコールバックを待つ
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        next()
      } else {
        next({ name: 'Home' })
      }
      return
    })
  }
  next()
})

export default new VueRouter({ routes });

# application.js

import Vue    from 'vue'
import App    from './App.vue'
import Router from '../router/router.js'
import Store  from '../store/store.js'


const app = new Vue({
   el: '#app',
   router: Router,
   store: Store,
   render: h => h(App)
})

Comments

[snogot]

私はvue.jsに詳しくないのですが、質問文に1点疑問があります。
> vuerouterはちゃんと読み込んでるはずです。
とありますが、router.jsを見る限りだと
「Router」が Router.beforeEach() 以前のどこにも定義されていないように見えます。
また参考元の記事では、router.beforeEach() の頭文字が小文字となっています。
Router と router の役割の違いを意識して、参考元の記事を読んでみるといいかもしれません。

[fork_]

かしこまりました。。
もう少し取り組んでみます。

[fork_]

const router = new VueRouter({
routes
})
を追加

export default router

// export default new VueRouter({ routes });　をコメントアウト
としたらいけました。ありがとうございましたm(_)m

[snogot]

問題解決の報告ありがとうございます。安心しました。
ご自身で答えを見つけられて、なによりですね。

Answer 1

const router = new VueRouter({
routes
})
を追加

export default router

// export default new VueRouter({ routes });　をコメントアウト
としたらいけました。ありがとうございましたm(_)m