Router issue in Vue.js

Question

I am trying to develop a SPA. I installed Vue router at the time of installing Vue-cli. My main.js file is like below

import Vue from 'vue'
import App from './App'
import Router from './router'
import VueResource from 'vue-resource'
import Auth from './packages/auth/Auth.js'


Vue.use(Auth)
Vue.use(VueResource)


Vue.config.productionTip = false

Router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.requiresAuth)) {
        if(Vue.auth.isAuthenticated()) {
            next({
                path: '/dashboard'
            })
        } 
        else {next()}
    }
    else if(to.matched.some(record => record.meta.forVisitors)) {
        if(!Vue.auth.isAuthenticated()) {
            next({
                path: '/'
            })
        }
        else {next()}
    }
    else {next()}
})


/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
})

I am getting error like below

Why I am getting error ?

UPDATE @Bert for you.

If I change my main.js file like below

import Vue from 'vue'
import App from './App'
import Router from './router'
import VueResource from 'vue-resource'
import Auth from './packages/auth/Auth.js'

Vue.use(Auth)
Vue.use(VueResource)

Vue.config.productionTip = false

Router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.requiresAuth)) {
        if(Vue.auth.isAuthenticated()) {
            next({
                path: '/dashboard'
            })
        } 
        else {next()}
    }
    else if(to.matched.some(record => record.meta.forVisitors)) {
        if(!Vue.auth.isAuthenticated()) {
            next({
                path: '/'
            })
        }
        else {next()}
    }else {next()}
})

/* eslint-disable no-new */
new Vue({
      el: '#app',
      router: Router,
      template: '<App/>',
      components: { App }
})

I am getting error like below

What is the solution in this regard ? Is it a problem of router ?

Answer 1

You import Router with a capital R.

import Router from './router'

You are trying to add it to Vue as router with a lower case r.

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
})