在 Vue.js 开发中，我们常常会遇到 Vue-Router 的 Bug，其中一个常见的 Bug 是 “Cannot read property '_normalized' of undefined”。 这个 Bug 会导致路由不能正常工作，给开发带来很大的困扰。在本文中，我们将介绍这个 Bug 的原因，并提供解决方法以及相关的示例代码。
Bug 的原因
这个 Bug 的原因是因为在使用 Vue-Router 的时候，我们没有正确地定义路由规则或者我们没有正确地使用路由。具体地说，当我们在使用 $router.push() 方法时，如果这个方法没有传入正确的路由规则，就会导致报错：“Cannot read property '_normalized' of undefined”。
解决方法
要解决这个 Bug，我们需要有列出以下几点解决方法：
1.检查路由规则
在使用 Vue-Router 前，我们需要检查并确保我们定义的路由规则是正确的。我们需要确保每一个路由规则都是唯一的，路由路径必须要以 “/” 开头，而且必须要设置路由组件。如果我们的路由规则没有一个正确的组件，就会导致报错：“Cannot read property '_normalized' of undefined”。
2.检查路由使用
在使用 $router.push() 方法时，我们必须要确保传入的参数符合 Vue-Router 的路由规则。具体地说，我们需要确保传入的参数是一个完整的路由路径。如果我们传入的是不完整的路径，就会导致报错：“Cannot read property '_normalized' of undefined”。
3.跳转路由时使用命名路由
当我们使用命名路由进行路由跳转时，我们需要确保我们定义的命名路由是唯一的。如果我们定义的命名路由有重复，就会导致报错：“Cannot read property '_normalized' of undefined”。
4.使用路由传递参数
在使用路由传递参数的时候，我们需要确保传入的参数是正确的。我们需要确保我们传入的参数是一个对象，同时这个对象必须要包含我们需要传递的参数。如果我们传入的参数不正确，就会导致报错：“Cannot read property '_normalized' of undefined”。
示例代码
下面是一些示例代码，可以帮助大家更好地理解这个 Bug。
1.检查路由规则
<!-- 在路由规则中确保每一个路由都是唯一的。 --> <router-link to="/home"></router-link> <router-link to="/about"></router-link>
2.检查路由使用
// 传入完整的路由路径
this.$router.push('/about');
// 错误的用法，因为传入的是不完整的路径。
this.$router.push('about');3.跳转路由时使用命名路由
<!-- 一定要确保命名路由是唯一的。 -->
<router-link :to="{name: 'home'}"></router-link>
<router-link :to="{name: 'about'}"></router-link>4.使用路由传递参数
// 传入正确的参数
this.$router.push({name: 'about', params: {id: 1}});
// 错误的用法，因为传入的参数不正确。
this.$router.push('about?id=1');总结
总的来说，解决 Vue-Router 的 Bug: “Cannot read property '_normalized' of undefined” 是非常重要的。我们要确保在使用 Vue-Router 时，路由规则和路由使用都是正确的。如果我们能遵循以上几点解决方法，我们就能更好地避免这个 Bug。同时，如果我们遇到这个 Bug，我们也能更快速地定位和解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc560f5ad90b6d042764be