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 ?

Bert · Accepted Answer · 2017-09-01 16:01:03Z

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

answered Sep 1, 2017 at 16:01

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

abu abu Over a year ago

Thanks @Bert. I made an update. I changed the code but I am getting another error. Thanks

Bert Over a year ago

@abuabu You might try posting that as a separate question. It's a different issue.

Collectives™ on Stack Overflow

Router issue in Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related