vue3出现TypeError: Cannot read properties of undefined (reading '$router')

在Vue3中出现"TypeError: Cannot read properties of undefined (reading '$router')"错误通常是因为在访问`$router`属性时，`$router`对象未定义。这可能是由于以下几个原因导致的：

1. 组件未正确引入`vue-router`：请确保在使用`$router`之前，已经正确引入了`vue-router`并将其安装到Vue实例中。

2. 组件未正确配置路由：请确保在路由配置中正确定义了路由，并将其与组件关联起来。确保在路由配置中使用了`component`选项来指定组件，并且在组件中正确访问`$router`属性。

3. 组件未正确放置在路由中：请确保组件被正确放置在路由中，以便能够访问到`$router`属性。如果组件被嵌套在其他组件中，请确保父组件也正确配置了路由。

以下是一个示例，演示了如何在Vue3中正确使用`$router`属性：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

// App.vue
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$router) // 在这里可以正常访问到$router属性
  }
}
</script>