vueRouter

如果你想在 Vue 3 项目中引入 vue-router 来实现页面路由导航，并结合我们之前的全局主题切换功能，下面是如何做的。我们会一步一步地将 vue-router 集成到现有项目中，并确保主题切换功能依然能正常工作。

---

1. 安装 vue-router

首先，确保你已经安装了 vue-router。如果你还没有安装，可以使用以下命令进行安装：

npm install vue-router@4

---

2. 配置 router

我们需要设置 Vue Router 和配置一些基本的路由。以下是创建路由配置文件并在项目中使用的步骤。

src/router/index.ts --- 路由配置

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue'
import AboutPage from '../views/AboutPage.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomePage,
  },
  {
    path: '/about',
    name: 'About',
    component: AboutPage,
  },
]

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

export default router

---

3. 创建 views 文件夹并添加页面

我们将创建两个简单的页面组件：HomePage.vue 和 AboutPage.vue。

src/views/HomePage.vue

<template>
  <div class="page">
    <h1>欢迎来到首页！</h1>
    <p>这是使用 Vue 3 + Vue Router 的演示页面。</p>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.page {
  padding: 20px;
}
</style>

src/views/AboutPage.vue

<template>
  <div class="page">
    <h1>关于页面</h1>
    <p>这是一个关于页面。</p>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.page {
  padding: 20px;
}
</style>

---

4. 在 main.ts 中引入并配置 Router

接下来，在 main.ts 中引入并安装 router，并将它与 App.vue 绑定。

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import './assets/global.css'  // 引入全局样式
import router from './router'  // 引入路由

createApp(App)
  .use(router)  // 使用路由
  .mount('#app')

---

5. 更新 App.vue 使用 <router-view>

我们需要在 App.vue 中添加 <router-view />，这是路由显示页面内容的地方。

src/App.vue

<template>
  <ThemeProvider>
    <!-- 显示路由内容 -->
    <router-view />
  </ThemeProvider>
</template>

<script setup lang="ts">
import ThemeProvider from './components/ThemeProvider.vue'
</script>

---

6. 添加路由链接（例如导航栏）

你可以创建一个简单的导航栏来展示如何在页面之间进行切换。

src/components/Navbar.vue --- 简单的导航栏组件

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

<script setup lang="ts">
</script>

<style scoped>
nav ul {
  display: flex;
  list-style: none;
  padding: 0;
}

nav li {
  margin-right: 20px;
}
</style>

然后在 App.vue 中使用这个导航栏：

src/App.vue

<template>
  <ThemeProvider>
    <!-- 导航栏 -->
    <Navbar />
    <!-- 显示路由内容 -->
    <router-view />
  </ThemeProvider>
</template>

<script setup lang="ts">
import ThemeProvider from './components/ThemeProvider.vue'
import Navbar from './components/Navbar.vue'
</script>

---

7. 完整的项目结构

src/
│
├── assets/
│   └── global.css        # 全局样式，包括主题相关的 CSS 变量
│
├── components/
│   ├── ThemeProvider.vue  # 用于提供主题状态并处理主题切换
│   └── Navbar.vue         # 导航栏组件
│
├── views/
│   ├── HomePage.vue       # 首页组件
│   └── AboutPage.vue      # 关于页面组件
│
├── router/
│   └── index.ts           # 路由配置
│
├── theme-context.ts       # 主题上下文定义
├── App.vue                # 根组件
└── main.ts                # 入口文件

---

🎨 主题切换与路由工作原理

1. 主题切换： 在 ThemeProvider 中，主题状态通过 provide 提供给应用中的所有子组件，而 inject 可以在任何地方使用这个状态进行主题切换。
2. 路由切换： 使用 Vue Router 进行页面切换时，<router-view /> 会根据当前路由加载对应的页面。不同的页面会在同一个 ThemeProvider 组件下显示，因此它们可以共享同一个主题。
3. 导航栏： 使用 <router-link> 实现页面间的导航。

---

这样，你就将 Vue Router 引入到项目中，并且结合全局主题切换功能，创建了一个能够在不同页面之间导航并切换主题的 Vue 3 应用。

如果你还需要进一步的帮助，或者想要做更复杂的路由设置（如嵌套路由、动态路由等），可以告诉我，我会继续帮助你！