Vue是一款流行的前端框架，为开发人员提供了强大的工具，以便更高效地构建单页面应用程序（SPA）。vue-router 是 Vue 的官方路由管理插件，可以轻松实现 SPA 对页面导航的管理。然而，使用 vue-router 过程中有时会出现一些 bug，其中最常见的是观察者错误（watcher error）。
下面，我们将讨论在 Vue 应用中使用 vue-router 时遇到 "Error in callback for watcher xxx: TypeError: Cannot read property 'yyy' of null" 这样的错误的解决方法。
什么是观察者错误（watcher error）
在 Vue 应用程序中，观察者（watcher）是一个非常有用的工具。它们使用计算属性来追踪数据的变化，当这些数据变化时，观察者会自动更新相应的组件。然而，有时候代码中会出现一些问题，使观察者无法正常工作，导致错误出现。
在页面导航期间，vue-router 经常会使用观察者来检测路由的变化。如果在路由变化期间出现问题，那么可能会触发观察者错误。这种错误的常见原因是尝试从一个空值中读取数据。例如：
立即学习“前端免费学习笔记（深入）”；
Error in callback for watcher "route": "TypeError: Cannot read property 'name' of null"
这意味着某个组件尝试从一个空值（null）中读取 "name" 属性，而它没有该属性，因此出现了错误。
修改代码以避免错误
通常，观察者错误是由于编码错误引起的。最常见的情况是在页面导航期间尝试访问未定义变量或未加载的组件。
最好的方法是在代码中添加一些安全检查，以确保代码不会出现问题。例如，我们可以使用 JavaScript 的“可选链”操作符（optional chaining operator）来避免从空值中读取数据。这是在 ECMAScript 2020 标准中引入的一个新方法。
以下是一个使用可选链的示例代码：
computed: {
title() {
return this.$route?.meta?.title || 'My Application';
}
}在上面的代码中，我们使用可选链操作符“?.”来确保 $route 和 meta 对象都存在。如果存在，则返回它们的 title 属性；否则返回默认标题 "My Application"。
我们还可以使用 JavaScript 的条件语句来检查变量和组件是否已定义或已加载。例如：
export default {
name: 'MyComponent',
computed: {
title() {
if (this.$route && this.$route.meta && this.$route.meta.title) {
return this.$route.meta.title;
} else {
return 'My Application';
}
}
}
}在这个示例中，我们使用了一个 if 语句来检查 $route 和 meta 对象是否存在，以及它们的 title 属性是否存在。如果它们都存在，则返回 title 属性；否则返回默认标题 "My Application"。
总结
观察者错误是 Vue 程序中常见的问题之一。在使用 vue-router 时，这些错误通常意味着组件尝试从未定义的变量或未加载的组件中读取数据。我们可以使用 JavaScript 的新特性（如可选链）或条件语句来检查变量和组件是否存在，以避免这些错误的发生。通常，修改代码以避免观察者错误是一种更好的解决方案，而不是尝试修复错误的机制本身。
