简单路由器链路无法工作，如何转到Vuejs 3中的另一个vue页面

npm install vue-router@next

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import AnotherPage from './views/AnotherPage.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/another-page', component: AnotherPage }
]

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

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

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/another-page">Go to Another Page</router-link>
  </div>
</template>

<script>
export default {
  // 组件逻辑
}
</script>

<!-- AnotherPage.vue -->
<template>
  <div>
    <h1>Another Page</h1>
    <router-link to="/">Go back to Home</router-link>
  </div>
</template>

<script>
export default {
  // 组件逻辑
}
</script>

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

<script>
export default {
  // 组件逻辑
}
</script>