Vue.js无法读取未定义(读取'router')错误的属性

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 确保路径正确

const app = createApp(App);
app.use(router);
app.mount('#app');

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

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
// 其他路由配置
];

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});

export default router;

// MyComponent.vue
<template>
<div>
<!-- 组件内容 -->
</div>
</template>

<script>
export default {
name: 'MyComponent',
mounted() {
// 确保在 mounted 钩子中访问 router 对象
console.log(this.$router);
}
};
</script>

// MyComponent.vue
<template>
<div>
<button @click="navigateToHome">Go to Home</button>
</div>
</template>

<script>
export default {
name: 'MyComponent',
methods: {
navigateToHome() {
// 确保在方法中正确访问 this.$router
this.$router.push({ name: 'Home' });
}
}
};
</script>