注意要点
一:
node_module里面的vue 和 vue-router都为2.0+版本
配置好vue2.0+ vue-router2.0+ 相应的版本依赖
二:
webpakc.config.js的设置 alias指明具体路径
如:
resolve: { extensions: ['', '.js', '.css', '.scss','.vue'], alias: { 'vue$': './node_modules/vue/dist/vue.js' } }
三:
vue1 引用的时候大写
import Vue from 'Vue';
vue2 改为小写
import Vue from 'vue';
四:
router初始化的问题,一般下面这段代码会在入口文件,例如main.js里面
import Vue from 'vue'
import Router from 'vue-router'
import app from './src/components/app.vue'
import list from './src/components/list.vue'
Vue.use(Router);
const router = new Router({
routes: [{
path: '/',
component: app
}, {
path: '/:id',
component: list
}]
})
const vm = new Vue({
router
}).$mount('#app')
在以上几步骤确认的情况下,再来说报错的问题。报错最大的问题在于,初始Router时
,传入对象属性routes的设置,路径所对的组件component:"这里面的内容是错误的"
,所以请先改成下面方式测试,而并不是强行从vue文件里面import出内容(因为有可能你处理vue文件的依赖模块都没安装全)
const router = new Router({
routes: [{
path: '/',
component: { template: '<div>home</div>' }
}, {
path: '/bar',
component: { template: '<div>bar</div>' }
}]
})