Vue | Error in render: "TypeError: Cannot read property 'matched' of undefined"

若有疑问，欢迎评论，我会尽快回复。

问题重现

在一次vue项目初始化时并没有加入vue-router。后期手动引入并配置，结果出现了如下的报错：

报错点是在vue引擎底层，并不是一般配置错误的问题，Cannot read property 'matched' of undefined意味着vue-router的某关键字没有被引擎获取到，导致报错。

问题定位

经过问题检索，我发现问题出在main.js中。我在vue实例中，使用对象属性简写形式加入了自命名的路由属性，但vue需要识别固定属性名router以加载vue-router。

import Vue from 'vue'
import App from './App'
import myRouter from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  myRouter,  //*** 问题点  ***//
  components: { App },
  template: ''
})

问题解决

所以，如果引入路由组件时，使用自定义名称，在vue实例中声明时，应以键值对形式引入，如下

new Vue({
  el: '#app',
  router: myRouter,
  components: { App },
  template: ''
})

或者干脆别折腾，以常规的router命名的对象简写形式引入

import router from './router'
new Vue({
  el: '#app',	
  router,  
  components: { App },
  template: ''
})

问题反思

出现这个问题，主要原因是思维僵硬。模板是用简写引入，我就简写引入，根本没有考虑逻辑问题。如果属性名不固定，每个人都以不同名称将router引入实例，那么引擎怎么识别呢？
正常逻辑是 {狼人: 老王}或简写为{狼人}，如果写成{老王，小张，孙笑川}，这还得引擎去猜谁是狼人，不合逻辑的。

附

如果你对ES6的对象属性简写不了解的话，可参考对象属性与方法简写