Vue 3 + Vue Router 的路由配置,简单示例

配置 Vue Router 是实现页面导航的基础，我会用最简单、最适合新手的方式，一步步教你完成 Vue 3 + Vue Router 的路由配置，全程代码可直接复制使用。

一、前置准备（安装依赖）

首先确保你已经安装了 Vue Router，打开终端，在项目根目录执行：

bash

运行

复制代码

# npm 安装
npm install vue-router@4

# 或 yarn 安装（如果用 yarn）
yarn add vue-router@4

注意：Vue 3 对应 Vue Router 4，Vue 2 对应 Vue Router 3，别装错版本。

二、核心配置步骤（以 Vue 3 + Vite 为例）

1. 创建路由配置文件

在项目的 src 目录下新建 router 文件夹，再创建 index.js 文件（这是路由的核心配置文件）：

javascript

运行

复制代码

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

// 1. 导入需要路由的组件（比如你的 Test 组件）
import Test from '../components/Test.vue' 
// 示例：如果有 About 组件，也可以导入
// import About from '../components/About.vue'

// 2. 定义路由规则：每个规则对应一个页面
const routes = [
  {
    path: '/', // 访问路径（网址栏里的地址） （http://localhost:5173/）
    name: 'test', // 路由名称（可选，但推荐加，方便编程式导航）
    component: Test // 该路径对应渲染的组件
  },
  // 示例：新增 About 页面的路由规则
  // {
  //   path: '/about',
  //   name: 'about',
  //   component: About
  // }
]

// 3. 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 采用 HTML5 历史模式（无 # 号的URL）
  routes // 传入上面定义的路由规则
})

// 4. 导出路由实例，供 main.js 使用
export default router

2. 在入口文件挂载路由

打开项目根目录的 src/main.js，挂载路由到 Vue 实例：

javascript

运行

复制代码

// src/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')

3. 在根组件中添加路由视图

打开 src/App.vue，添加 <router-view> 标签（路由匹配的组件会渲染在这里）：

vue

复制代码

<!-- src/App.vue -->
<template>
  <div id="app">
    <!-- 导航栏（可选，配合 <router-link> 使用） -->
    <nav>
      <router-link to="/">Test 页面</router-link>
      <!-- <router-link to="/about">About 页面</router-link> -->
    </nav>
    <!-- 路由视图：核心！匹配的组件会显示在这里 -->
    <router-view />
  </div>
</template>

<style>
/* 可选：给激活的导航链接加样式 */
router-link.active {
  color: red;
  font-weight: bold;
}
</style>

三、关键配置项解释

表格

配置项	作用
`path`	访问路径（如 `/`、`/about`），决定网址栏显示的地址
`name`	路由名称，编程式导航时可用（如 `router.push({ name: 'test' })`），更灵活
`component`	该路径对应渲染的组件，需提前导入
`createWebHistory`	开启 HTML5 历史模式（URL 无 # 号），若用 `createWebHashHistory` 则是哈希模式（带 #）
`<router-view>`	路由组件的挂载点，必须有，否则页面不会显示内容

四、测试是否配置成功

确保你的 Test.vue 组件存在（比如 src/components/Test.vue）：

vue

复制代码

<!-- src/components/Test.vue -->
<template>
  <div>这是 Test 页面</div>
</template>

启动项目（npm run dev），访问 http://localhost:5173/，能看到「这是 Test 页面」就说明配置成功了。

总结

路由配置核心是「定义规则 → 创建实例 → 挂载到 Vue → 添加视图容器」四步；
routes 数组里的每个对象对应一个页面，path 是访问路径，component 是对应组件；
<router-view> 是路由组件的渲染容器，必须在根组件中添加，否则页面无法显示。

router-Link,与Router-Link这样写行吗？

在 Vue 模板中，router-Link 和 Router-Link 这两种写法不推荐，虽然大部分情况下能运行，但不符合 Vue 的规范，还可能引发潜在问题。我帮你理清不同写法的区别和正确用法：

一、核心结论

表格

写法	是否可行	规范与否	推荐度
`<router-link>`	✅ 可行	✅ 规范	🌟 强烈推荐
`<RouterLink>`	✅ 可行	✅ 规范	⭐ 可选
`<router-Link>`	✅ 勉强可行	❌ 不规范	❌ 不推荐
`<Router-Link>`	✅ 勉强可行	❌ 不规范	❌ 不推荐

二、详细解释

为什么不推荐 router-Link/Router-Link？
- HTML 标签本身是大小写不敏感 的，但 Vue 对组件名的解析遵循「约定」：
  - 模板中用 kebab-case（短横线全小写） ：<router-link>（符合 HTML 标签习惯）
  - 脚本中用 PascalCase（大驼峰） ：import { RouterLink } from 'vue-router'
- 混合大小写（如 router-Link）会让代码风格不统一，部分 IDE / 编辑器会报错提示，也不符合团队协作的规范。
特殊情况：如果非要用混合大小写会怎样？
- 开发环境运行大概率没问题（Vue 会做兼容）；
- 生产环境打包可能因代码压缩 / 格式化工具的处理，导致组件识别异常；
- 团队协作时会被代码规范检查工具（如 ESLint）标红，增加沟通成本。

三、补充：Vue 组件名的命名规范

Vue 官方明确建议：
4. 模板中 ：使用 kebab-case（全小写 + 短横线），如 <router-link>、<my-component>；
5. 脚本中 ：使用 PascalCase（大驼峰），如 import RouterLink、const MyComponent = { ... }。