vuejs路由使用的问题Error in render function: "TypeError: Cannot read property 'matched' of undefined"
来源:互联网 发布:linux编译安装mysql 编辑:程序博客网 时间:2024/05/21 13:10
从一次执行错误开始
html代码
<div id="app"> <router-link to="/home">首页</router-link> <router-link to="/about">关于我们</router-link> <router-view></router-view></div>
当然了这个HTML代码时没有问题的,大家也可以再vue-router的文档上看到相应的代码。重点在下边的js代码部分,这部分对于第一次接触vue-router的人大部分会遇到吧。
js代码
// 1. 定义(路由)组件。 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 const routes3 = [ { path: '/home', component: Foo }, { path: '/about', component: Bar } ] // 3. 创建 router 实例,然后传 `routes` 配置 const router4 = new VueRouter({ routes3 }) // 4. 创建和挂载根实例。 const app = new Vue({ router4}).$mount('#app')
运行错误说明
运行以上实例然而界面显示为空白,什么都没有。what!这个不对吧。然而打开开发者模式后再来看看,错误提示如下:
错误分析
其实这个是按照官方的写法写的,一般如果喜欢搞得程序员才会遇到。那么为什么会出现这样的错误呢?
因为在官方第2步和第3步总的常量的命名其实是有规则的。
官方的路由定义和路由实例的名称分别是:routes和router
但是我们以为这两个可以随便变所以写成了自己喜欢的名称。这样写之后其实在实例化路由实例和应用实例时要有变化:
const router = new VueRouter({ routes // (缩写)相当于 routes: routes})
这儿为什么可以直接将路由定义数组传入VueRouter中呢?因为实例中对路由定义的数组的命名是routes。注释中写了routes相当于routes:routes
那么如果我们的路由定义数组名称不是routes当然是不能使用简写的。就要乖乖的写成 routes:routes3或其他方式routes3不一定是你自己的路由定义数组名称,请替换成自己的就行
const app = new Vue({ router}).$mount('#app')
同理官网上载实例化vue对象时直接传入路由实例,为什么可以这样传呢?同样是因为路由对象命名为了router。
如果你的VueRouter的实例名称为router4那么你在实例化时乖乖的写成router:router4这样
好了这只是个简单的踩坑的过程,比较小儿科,望大神略过。
阅读全文
2 0
- vuejs路由使用的问题Error in render function: "TypeError: Cannot read property 'matched' of undefined"
- vue中报Error in render function: "TypeError: Cannot read property
- "TypeError: Cannot read property 'undefined' of undefined"
- React开发问题记录--(in promise) TypeError: Cannot read property 'data' of undefined
- TypeError: Cannot read property 'parentNode' of undefined
- TypeError: Cannot read property 'left' of undefined
- TypeError: Cannot read property 'newLine' of undefined
- TypeError: Cannot read property 'password' of undefined
- TypeError: Cannot read property 'query' of undefined
- 【vue2.0】Cannot read property 'matched' of undefined
- Uncaught TypeError: Cannot read property 'length' of undefined出现的问题
- 程序是没有问题的但是提示Uncaught TypeError: Cannot read property 'linear' of undefined
- 关于Uncaught TypeError: Cannot read property 'toLowerCase' of undefined的问题
- Extjs4---Uncaught TypeError: Cannot read property ‘items’ of undefined
- 【StackFlow】Uncaught TypeError: Cannot read property 'pageCount' of undefined
- Ckeditor: Uncaught TypeError: Cannot read property 'keyCode' of undefined 解决方法
- Uncaught TypeError: Cannot read property 'msie' of undefined问题解决方案
- Uncaught TypeError: Cannot read property 'options' of undefined 错误
- kmp深入
- 在Python结构体中存储值
- 多外部中断的优先级配置
- LeetCode系列之Add Two Numbers
- 美团编程大赛 数学题 拓展欧几里得和解是否存在
- vuejs路由使用的问题Error in render function: "TypeError: Cannot read property 'matched' of undefined"
- 快递实名制遭遇滑铁卢,背后原因在这里
- 解决Spring+Quartz无法自动注入bean问题
- CentOS 7 开放3306端口访问 iptables
- FTPrep, 2 Add Two Numbers
- 【Leetcode】【python】Arranging Coins
- 初级程序员的业务逻辑简单吗?
- Android MVP模式基类结构
- 编译android 7.0 出现Try increasing heap size with java option '-Xmx<size>'错误解决方案