vue-router4 页面跳转问题

router.push('xxx')的时候一直跳转到 / 路径，但是使用<router-link :to="toPage2()"></router-link>这种标签就可以正常跳转。

vue3 + vue-router4

page1

<template>
  <h1>page1</h1>
  <button v-on:click="toPage2()">toPage2</button>
</template>

<script>
import {useRouter} from 'vue-router'

export default {
  name: "page1",
  setup () {
    const router = useRouter()
    const toPage2 = () => {
      router.push('page2')
    }
    return {
      toPage2
    }
  }
}
</script>

page2

<template>
  <h2>page2</h2>
  <button v-on:click="toPage1()">toPage1</button>
</template>

<script>
import {useRouter} from "vue-router";

export default {
  name: "page2",
  setup () {
    const router = useRouter()
    const toPage1 = () => {
      router.push('page1')
    }
    return {
      toPage1
    }
  }
}
</script>

router/index.js

import {createRouter, createWebHistory} from 'vue-router'

const routes = [
  {
    path: "/",
    redirect: 'page1'
  },
  {
    path: '/page1',
    name: 'page1',
    component: () => import('@/view/page1.vue')
  },
  {
    path: '/page2',
    name: 'page2',
    component: () => import('@/view/page2.vue')
  },
]

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

export default 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')

App.vue

<template>
  <router-view/>
</template>

<script>

export default {
  name: 'App',
}
</script>