Vue3中如何实现单页应用（SPA）导航操作

  在 Vue 3 中实现单页应用（SPA）的导航操作，通常使用 Vue Router，它是官方提供的路由管理库，支持客户端路由，实现无页面刷新导航。

步骤：实现 Vue 3 SPA 导航

1. 安装 Vue Router

  如果是 Vue CLI 或 Vite 项目，先安装 Vue Router：

npm install vue-router

2. 创建路由配置
  在 src/router/index.js（或 .ts）中定义路由：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView }
]

const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 history 模式
  routes
})

export default router

3. 在 Vue 应用中注册路由
  在 src/main.js（或 .ts）中导入并使用 Vue Router：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入路由配置

const app = createApp(App)
app.use(router) // 挂载路由
app.mount('#app')

4. 设置路由视图
  在 App.vue 中添加 ，用于动态渲染当前匹配的组件：

<template>
  <nav>
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view></router-view>
</template>

5. 创建页面组件
  例如，在 src/views/HomeView.vue：

<template>
  <div>
    <h1>首页</h1>
    <p>欢迎来到 Vue 3 SPA</p>
  </div>
</template>

在 src/views/AboutView.vue：

<template>
  <div>
    <h1>关于我们</h1>
    <p>这是关于页面</p>
  </div>
</template>

6. 编程式导航
  除了 之外，也可以使用 router.push 进行页面跳转：

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

const router = useRouter()

const goToAbout = () => {
  router.push('/about') // 跳转到关于页
}
</script>

<template>
  <button @click="goToAbout">跳转到关于页面</button>
</template>

补充：路由模式

• createWebHistory()：使用 HTML5 history 模式，URL 结构美观（如 /about）。
• createWebHashHistory()：使用 hash 模式（如 /#/about），适用于不支持服务器配置的情况。

这样，Vue 3 的单页应用（SPA）导航就实现了，用户可以在不刷新页面的情况下流畅切换不同视图。🚀