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

喜欢ヅ旅行 2022-05-10 08:28 219阅读 0赞

今天在写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>