vue vue-router模块化问题

Question

想把vue-router独立成一个模块的时候报错

先放正常的代码main.js

import App from './App'

// import router from './router'
import Vue from 'vue'
import VueRouter from 'vue-router'
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

var router = new VueRouter({
    routes: routes
});

Vue.use(VueRouter)

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

然后把vue-router部分的代码独立到router.js中，然后在main.js中导入，报错。以下是router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

var router = new VueRouter({
    routes: routes
});

export {
    router
}

main.js

import App from './App'

import router from './router'

Vue.use(VueRouter)

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

报错信息

[Vue warn]: Error when rendering component <hello> at G:\Clouds\vw\CloudCity\src\components\Hello.vue: warn @ vue.common.js?e881:521
vue.common.js?e881:3098 Uncaught TypeError: Cannot read property 'path' of undefined

页面中$route.path为undefined

Answer 1

import {router} from './router'

Answer 2

Vue.use(VueRouter) // 写到router.js  先use再 new VueRouter（）

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

Vue.use(VueRouter) 

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

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

var router = new VueRouter({
    routes: routes
});

export {
    router
}

Answer 3

main.js 必须这样渲染
import App from './App'
import router from './router'
Vue.use(VueRouter)
new Vue({

el: '#app',
router: router,
render:h=>h(App)

})

Answer 4

# router.js
import Vue from 'vue'
import Router from 'vue-router'
import { sync } from 'vuex-router-sync'

import Vuex from '@/vuex'

Vue.use(Router)

const router = new Router({
    routes: []
})

router.beforeEach((to, from, next) => {})
router.afterEach(() => {})

sync(Vuex, router)

export default router

# main.js
import Vue from 'vue'

import Router from '@/router'
import Vuex from '@/vuex'

new Vue({
    router: Router,
    store: Vuex
}).$mount('#app')

Answer 5

main.js多写了一行：

Vue.use(VueRouter)

Answer 6

题主问这个问题应该是受 vue-cli脚手架 默认的 export default命令影响，没有搞清楚es6里面两种输出export的区别

如果router.js最后输出是

//第一组
    export default router // 输出
    
    import router  from './router'//输入
//第二组    
    export {router} //输出
    import {router}  from './router'//输入
    

上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。
本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字