Vue 3 单页应用Router路由跳转示例

在 Vue3 中实现「首页链接到多个 Vue 文件」的核心是通过 ​​Vue Router（路由管理器）​ ​ 管理单页应用（SPA）的页面跳转。每个「页面」本质是一个独立的 .vue组件，通过路由配置关联 URL 路径，最终在首页通过路由链接跳转。以下是详细步骤：

一、前置条件：安装 Vue Router

如果项目未安装 Vue Router，需先安装（Vue3 推荐使用 Vue Router 4+ 版本）：

# npm
npm install vue-router@4

# yarn
yarn add vue-router@4

# pnpm
pnpm add vue-router@4

二、核心步骤：配置路由并关联页面组件

1. 创建页面组件（.vue文件）

假设你要链接到 3 个页面：Home.vue（首页）、About.vue（关于页）、Contact.vue（联系页），需先在项目中创建这些组件。

示例目录结构：

src/
├── pages/          # 存放所有页面组件
│   ├── Home.vue
│   ├── About.vue
│   └── Contact.vue
├── router/         # 存放路由配置
│   └── index.js
├── App.vue         # 根组件
└── main.js         # 入口文件

​​示例页面组件（以 About.vue为例）​​：

<!-- src/pages/About.vue -->
<template>
  <div class="about-page">
    <h1>关于我们</h1>
    <p>这是关于页面的内容。</p>
  </div>
</template>

2. 配置路由（router/index.js）

在 router目录下创建 index.js，定义路由规则，将 URL 路径映射到对应的页面组件。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

// 导入页面组件
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import Contact from '../pages/Contact.vue'

// 定义路由规则（path 到 component 的映射）
const routes = [
  {
    path: '/',          // 根路径（首页）
    name: 'Home',       // 路由名称（可选，方便跳转）
    component: Home     // 映射到 Home.vue
  },
  {
    path: '/about',     // 访问 /about 时跳转
    name: 'About',
    component: About
  },
  {
    path: '/contact',   // 访问 /contact 时跳转
    name: 'Contact',
    component: Contact
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),  // 使用 HTML5 历史模式（无 # 号）
  routes                        // 关联路由规则
})

export default router  // 导出路由实例

3. 挂载路由到 Vue 应用（main.js）

在入口文件 main.js中，将路由实例注入到 Vue 应用中，使路由生效。

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 导入路由实例

// 创建 Vue 应用
const app = createApp(App)

// 使用路由插件
app.use(router)

// 挂载应用到 DOM
app.mount('#app')

4. 在首页添加路由链接（App.vue）

在根组件 App.vue中，使用 <router-link>组件生成可点击的导航链接，并通过 <router-view>显示当前路由对应的页面内容。

<!-- src/App.vue -->
<template>
  <div class="app-container">
    <!-- 导航栏：使用 router-link 跳转 -->
    <nav>
      <router-link to="/">首页</router-link> | 
      <router-link to="/about">关于</router-link> | 
      <router-link to="/contact">联系</router-link>
    </nav>

    <!-- 页面内容区域：路由匹配的组件会渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<style scoped>
/* 可选样式：激活的链接高亮 */
.router-link-active {
  color: #409eff;
  font-weight: bold;
}
</style>

三、关键功能扩展

1. 动态路由（可选）

如果需要传递参数（例如用户 ID），可以使用动态路由。

​​示例​ ​：访问 /user/123时，123会被捕获为参数。

1. 修改路由配置：

// router/index.js
{
  path: '/user/:id',  // 动态参数（:id 是参数名）
  name: 'User',
  component: () => import('../pages/User.vue')  // 按需加载（可选优化）
}

1. 在页面中获取参数：

<!-- src/pages/User.vue -->
<template>
  <div>用户 ID：{{ $route.params.id }}</div>
</template>

2. 编程式导航（可选）

除了 <router-link>，还可以通过 JavaScript 代码跳转（例如点击按钮触发）。

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

const router = useRouter()

// 跳转到 /about
const goToAbout = () => {
  router.push('/about')  // 或 router.push({ name: 'About' })
}

// 后退到上一页
const goBack = () => {
  router.go(-1)
}
</script>

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

四、常见问题排查

1. 路由跳转后页面无变化？

• 检查 <router-view>是否存在于根组件（App.vue）中。
• 确认路由配置的 path和 <router-link>的 to属性路径一致。
• 确保路由实例已通过 app.use(router)挂载到 Vue 应用。

2. 页面组件未渲染？

• 检查组件导入路径是否正确（例如 ../pages/Home.vue是否存在）。
• 如果使用动态导入（() => import(...)），确认路径拼写无误。

3. 路由模式选择？

• createWebHistory()：使用 HTML5 历史模式（URL 无 #，需后端配合处理刷新）。
• createWebHashHistory()：使用哈希模式（URL 带 #，无需后端配置，适合纯前端项目）。

五、完整示例效果

通过以上步骤，最终效果如下：

• 访问 /时显示 Home.vue内容。
• 点击导航链接跳转到 /about或 /contact，显示对应页面。
• 地址栏 URL 会同步更新为当前路径。

通过 Vue Router，你可以轻松管理多个页面（.vue组件）之间的跳转，实现单页应用的流畅导航。核心是​​配置路由规则​ ​和​​使用路由链接/视图​​，后续还可扩展嵌套路由、权限控制等高级功能。