Router Problem in Vue.js

Question

Ich versuche, ein SPA zu entwickeln. Ich habe den Vue-Router zum Zeitpunkt der Installation von Vue-cli installiert. Meine main.js Datei ist wie unten

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 } 
}) 

ich Störung erhalte wie unten

Warum ich Störung erhalte?

UPDATE @Bert für Sie.

Wenn ich wie meine main.js Datei ändern unter

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 } 
}) 

ich Störung erhalte wie unten

Was die Lösung ist in dieser Hinsicht? Ist es ein Routerproblem?

Answer 1

Sie importieren Router mit einem Kapital R.

import Router from './router' 

Sie versuchen, es als router mit einem kleinen r Vue hinzuzufügen.

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