使用vue-router时,Vue.use与new Vue似乎有冲突?

如标题:在主控js中的Vue.use跟new Vue似乎冲突。当new vue放前面时,可以正常使用,但是报错:
图片描述
vue.use放前面时,则编译失败,报错:
图片描述

如何解决?我使用的是webpack+babel+vue-loader

主页面代码:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Router Demo</title>
</head>

<body>
    <div id="app">
        <router-view></router-view>
        <nav_main></nav_main>
    </div>
    <script src="dist/bundle.js"></script>
</body>

</html>

主控js:

import Vue from 'vue'
import css from './vue/css.vue'

import sc from './vue/sc.vue'    //场景
import nav_main from './vue/nav.vue'    //主导航条
import home from './vue/home.vue'    
import about from './vue/about.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

/*冲突部分*/
/*new Vue({
  el: 'body',
  data:{
      current:2
  },
  components: { nav_main }
})*/


var router = new VueRouter();
router.map({
    '*':{component: sc },
    '/home': {component: home },
    '/about':{component: about}
})
router.start({}, '#app');
router.go({"path":"/home"});

nav.vue:

<template>
    <ul class="nav">
        <li><a v-link="{ path: '/sc' }">!!项目1</a></li>
        <li><a v-link="{ path: '/home' }">项目2</a></li>
        <li><a v-link="{ path: '/about' }">项目3</a></li>
    </ul>
</template>
阅读 8.5k
3 个回答
var app = Vue.extend({
  el: 'body',
  components: { nav_main }
})

...

router.start(app, '#app')

试试看?

用es6啊,export default

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进