Vue: caught TypeError: Cannot set property 'app' of undefined at VueRouter (vue-router.js:2430)

今天在写Vue的时候，遇到了标题所示的错误，找了半天也没找出来，我就纳闷了，为什么app是undefied，我明明定义了的呀？先看错误代码。

const router = VueRouter({
	routes: [
		{ 
			path: '/user/:id', component: User,
			children: [
				{
					// 当/user/:id/profile/:profile 匹配成功，
					// UserProfile 会被渲染在 User 的  中
					path: 'profile/:profile', component: UserProfile
				},
				{
					path: 'username/:username', component: UserName						
				}
			]
		}
	]
})
// 我的app定义地如此简单，我怎么会出错呢？
const app = new Vue({
	router // (缩写) 相当于 router: router
}).$mount("#app")

这是我在官网学习vue路由(Vue Router)遇到的问题。可以到看到app定义的代码是十分规范，十分正确的，我当时检查这段代码，至少不下7次，还有上面路由的代码也是。

接下来我们继续分析哪里出了问题，产生app未定义的原因，而你定义了，那么错误就是在初始化app时产生的，是什么会让app初始化错误呢？
没错，是router这个唯一的参数（ router 是缩写，相当于 router: router），如果router本身有问题，那么就间接导致了app产生错误，这就是为什么这一类间接错误会让人难以找到的原因。

接下来我们看看router的定义，是const router = VueRouter({ … })。
没错，正确代码应该是const router = new VueRouter({ … })，少了个new，你们可以想得到我有多郁闷。

接下来我们来总结下可能产生undefined的原因：
（1）真的是未定义，不过这总情况应该很少；
（2）定义时未正确定义，比如别人明明是个对象，然后你偏偏不写new；
（3）初始化该变量的时候，你传入的参数有问题，应该好好检查参数，在你找了半天语法错误的情况下。

下面附上我的小demo的源码：

 
  
  
  
  
 
 
	

		

			user id

			user id profile

			user id username