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/...

星空守望

5229人浏览 · 2018-09-27 13:41:08

星空守望 · 2018-09-27 13:41:08 发布

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

const router = VueRouter({
	routes: [
		{ 
			path: '/user/:id', component: User,
			children: [
				{
					// 当/user/:id/profile/:profile 匹配成功，
					// UserProfile 会被渲染在 User 的 <router-view> 中
					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的源码：

<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 </head>
 <body>
	<div id="app">
		<p>
			<router-link to="/user/10001">user id</router-link><br>
			<router-link to="/user/10001/profile/hi">user id profile</router-link><br>
			<router-link to="/user/10001/username/HuaHuala">user id username</router-link>
		</p>
		<router-view></router-view>
	</div>
	
	<script>
		const User = {
			template: '\
				<div>\
					<span> user: {{ $route.params.id }} </span>\
					<router-view></router-view>\
				</div>\
				'
		}
		const UserProfile = { template: '<span> profile: {{ $route.params.profile }} </span>' }
		const UserName = { template: '<span> user name: {{ $route.params.username }} </span>' }
		
		const router = new VueRouter({
			routes: [
				{ 
					path: '/user/:id', component: User,
					children: [
						{
							// 当/user/:id/profile/xxx 匹配成功，
							// UserProfile 会被渲染在 User 的 <router-view> 中
							path: 'profile/:profile', component: UserProfile
						},
						{
						    // 当/user/:id/username/xxx 匹配成功，
							// UserName 会被渲染在 User 的 <router-view> 中
							path: 'username/:username', component: UserName						
						}
					]
				}
			]
		})
		
		const app = new Vue({
			router // (缩写) 相当于 router: router
		}).$mount("#app")
	</script>
 </body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^