修复 Vue 3.0 路由错误："No active route record was found"

2023-10-05 03:34:06

Vue 3.0 路由报错："No active route record was found. Are you missing a component?"

在 Vue 3.0 中，如果你遇到 "No active route record was found. Are you missing a component?" 的错误，这意味着 Vue 无法找到一个活动路由记录。这个错误通常发生在以下两种情况下：

你没有在应用程序中包含 <router-view> 组件： <router-view> 组件是 Vue Router 用于渲染路由视图的地方。如果你没有在应用程序中包含它，Vue 将无法找到要渲染的内容。
你正在使用过时的路由监测方式： 在 Vue 2.0 中，路由监测是通过 watch 选项进行的。然而，在 Vue 3.0 中，路由监测已更改为 onBeforeRouteUpdate 守卫。如果你正在使用过时的路由监测方式，你将需要将其更新为 onBeforeRouteUpdate。

修复该错误

要修复此错误，请执行以下步骤：

确保你已在应用程序中包含 <router-view> 组件： 在你的 App.vue 文件中，确保你包含了 <router-view> 组件。它应该是这样的：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

更新到新的路由监测方式： 如果你正在使用过时的路由监测方式，请将其更新为 onBeforeRouteUpdate 守卫。以下是 onBeforeRouteUpdate 的示例：

import { onBeforeRouteUpdate } from 'vue-router'

export default {
  setup() {
    onBeforeRouteUpdate((to, from) => {
      // 在路由更新之前执行某些操作
    })
  }
}