为什么我从 vue-router 收到“无法读取 null 读取 ParentNode 的属性”错误？

Question

在我的 Vue 项目中，我使用的是 vue-router。当我导航时某个页面时，我收到一个模糊的错误，并且路由器停止工作。单击链接会更新浏览器中的 URL，但应用程序不会导航到相应的页面。

错误是

类型错误：无法读取 null 的属性（读取“parentNode”）

query当用户更改过滤和排序选项时，相关页面使用观察程序来更新路由参数。这样，当刷新/复制/添加页面时，返回时将选择相同的选项。

watch(
  () => route.query,
  () => {
    selectedAddresses.value = selectedAddressesQuery.value
    selectedStatuses.value = selectedStatusesQuery.value
    selectedSortOrder.value = selectedSortOrderQuery.value
  },
  { deep: true }
)

watch(
  () => [
    selectedAddresses.value,
    selectedStatuses.value,
    selectedSortOrder.value,
  ],
  async () => {
    router.replace({
      query: {
        ...route.query,
        address: selectedAddresses.value,
        sort: selectedSortORder.value,
        status: selectedStatuses.value,
      },
    })
  }
)

当我离开该页面时，为什么会出现此错误？

Answer 1

问题是当离开页面时观察者被触发，因为查询被清除，从技术上改变了它。

解决方案是向监视处理程序添加一条保护语句，以检查我们是否仍在当前页面上。

watch(
  () => route.query,
  () => {
    // prevent triggering on page leave, which clears the query
    if (route.name !== 'invoices') return

    selectedAddresses.value = selectedAddressesQuery.value
    selectedStatuses.value = selectedStatusesQuery.value
    selectedSortOrder.value = selectedSortOrderQuery.value
  },
  { deep: true }
)

这可以防止第二个观察者（观察正在设置的值）被触发，该观察者试图更新不再存在的路线。