vue3中页面跳转两种实现方式

<template>
  <router-view></router-view>
  <router-link to="/">首页</router-link>
  <button @click="go">我的</button>
</template>

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

// 使用 useRouter 创建一个 router 实例
const router = useRouter()

// 定义 go 函数以便路由跳转
function go() {
  router.push({ path: '/my' })
}

// 将 go 函数暴露给模板
</script>

<template>
  <router-view></router-view>
  <router-link to="/">首页</router-link>
  <button @click="go">我的</button>
</template>

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

// 使用 useRouter 创建一个 router 实例
const router = useRouter()

// 定义 go 函数以便路由跳转
const go = () => {
  router.push('/my')
}
</script>

{
    path: '/my',
    component: () => import('@/views/my'),
    hidden: true
  },

const whiteList = ['/login', '/register',  '/forget_pwd', '/index', '/my']

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent }
]

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent }
]

<template>
  <div>

     <router-view></router-view>
  </div>

</template>

<!-- HomeComponent -->
<template>
  <div>

     <h1>Home Page</h1>
  </div>

</template>

<!-- AboutComponent -->

<template>
  <div>

     <h1>About Page</h1>
  </div>
</template>

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HeaderComponent from '../components/HeaderComponent.vue'
import MainComponent from '../components/MainComponent.vue'
import FooterComponent from '../components/FooterComponent.vue'


const routes = [

    {
       path: '/dashboard',
       components: {
           header: HeaderComponent,
           main: MainComponent,
           footer: FooterComponent
        
        }

    }
]

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

export default router

<!-- App.vue -->
<template>
  <div>
    <router-view name="header"></router-view>
    <router-view name="main"></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

<template>
  <header>
    <h1>Header</h1>
  </header>
</template>

<template>
  <main>
    <h2>Main Content</h2>
  </main>
</template>

<template>
  <footer>
    <p>Footer</p>
  </footer>
</template>