vue.js - vue vue-router模块化问题

问题描述

问 题

想把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

解决方案

import {router} from './router'

这篇关于vue.js - vue vue-router模块化问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！