git | 关联本地仓库到远端

MGsniper

已于 2022-02-23 19:16:17 修改

阅读量1.2w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue ES6+ 文章标签： vue router 字面量简写

于 2019-03-20 15:39:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36145914/article/details/88690581

ES6+ 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

在Vue项目后期手动引入并配置vue-router时出现报错，报错点在vue引擎底层。经检索，问题出在main.js中，在vue实例使用对象属性简写形式加入自命名路由属性，而vue需识别固定属性名加载vue-router。解决办法是用键值对形式引入或用常规命名的对象简写形式引入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

问题重现

在一次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: '<App/>'
})

问题解决

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

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

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

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

问题反思

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

附

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