export 'default' (imported as 'router') was not found in './router'

Question

Hi i want to implement vue router in another file but i got one error: "export 'default' (imported as 'router') was not found in './router'

Thanks in advance.

// Import
import Vue from 'vue'
import axios from 'axios'
import VueMeta from 'vue-meta'
import { router  }from './router'
import App from './pages/app'

// Config
Vue.use(VueMeta)
window.axios = axios
Vue.config.productionTip = false

// Start Vue.js
new Vue({
  router,
  ...App
})

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Bar = { template: '<div>bar</div>' }

let routes = [
    // Login
    { path: '/login', component: Bar },

    // Errors
    { path: '*',  component: Bar  }
]

const router = new VueRouter({
    base: 'public', 
    mode: 'history',
    routes
})

Solution

In order to import router from your /index.js file, you need to actually export it. Just add export before const router = in your router/index.js file. So it looks like:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Bar = { template: '<div>bar</div>' }

let routes = [
    // Login
    { path: '/login', component: Bar },

    // Errors
    { path: '*',  component: Bar  }
]

export const router = new VueRouter({
    base: 'public', 
    mode: 'history',
    routes
})

Comments

[Bergi]

Your router/index.js doesn't export anything? But no, the error message doesn't fit your code

[demianh]

you need to export the router, something like export default router = new VueRouter({