vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: “TypeError: Cannot read property ‘matched‘

错误截图

踩坑原因

在配置vue-router的路由时和将router实例挂载至Vue实例上时，实例名称没有按照标准

配置vue时

在配置vue-router时，我们一般会将路由的映射关系抽成一个数组，就想下面这样

const routes = [{path: '',redirect: '/home'},{path: '/home',component: Home},{path: '/category',component: Category},{path: '/shopcart',component: ShopCart},{path: '/profile',component: Profile}
];

然后再将这个路由映射数组添加至VueRouter对象中，然后导出，就像下面这样，在添加至VueRouter实例时，可以采用ES6的新写法，即直接写数组名routes

export default new VueRouter({routes,mode: 'history',
})

坑就在这，如果你在上面配置路由映射关系的数组时的数组名不叫routes，而是route1，那么你在下面添加至VueRouter实例时，你很可能会这样写，于是你就入坑了。。。。

export default new VueRouter({route1,mode: 'history',
})

解决方法有二

第一种：数组名直接取名为routes，然后再添加至VueRouter实例时这样写

export default new VueRouter({routes,mode: 'history',
})

第二中：数组名字随便起，在添加至VueRouter实例时这样写

export default new VueRouter({routes:你起的数组名mode: 'history',
})

挂载到Vue实例中时

同理，vue实例名称只能是router，解决方法与上面一样

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

总结

在使用vue-router时，记住两个特殊的名字routes与router

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: “TypeError: Cannot read property ‘matched‘相关推荐

工作194:vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: ‘/system‘. This may cause an
错误如下拿到公司一个小哥哥的代码,一来就报了一堆bug,吓得我先写一篇博客vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detecte ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: “TypeError: Cannot read properties of und
vue使用vue-element-admin报错: vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "TypeError ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: ‘xxx‘. This may cause an update err
vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: 'xxx'. This may cause an update err ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop
问题描述 vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property “XX“ must be accessed with “$data._tos“ because
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property "tos" must be accessed with " d a t ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid component name: “__file“. Component names should con
vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid component name: "__file". Component names ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: to
vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: "to" [Vue warn]: Error in r ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: “TypeError: Object(...) is not a func
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 从后端拿取数据渲染到表格数据.结果明明写的没错,但是却 ...
报错vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: “TypeError: Cannot read property ‘length‘
在用 element-ui 做表单复选框的时候,出现报错 vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeErro ...
Vue文件报错vue.runtime.esm.js?2b0e:619和1888 Error: [ElementForm]unpected width两个错误
今天在测试之前写的页面的时候,发现在切换页面的时候报了下面这两个错误. vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeDestroy h ...