配置 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 router2. 在入口文件挂载路由
打开项目根目录的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'
- 模板中用kebab-case（短横线全小写）：
- 混合大小写（如
router-Link）会让代码风格不统一，部分 IDE / 编辑器会报错提示，也不符合团队协作的规范。
- HTML 标签本身是大小写不敏感的，但 Vue 对组件名的解析遵循「约定」：
特殊情况：如果非要用混合大小写会怎样？
- 开发环境运行大概率没问题（Vue 会做兼容）；
- 生产环境打包可能因代码压缩 / 格式化工具的处理，导致组件识别异常；
- 团队协作时会被代码规范检查工具（如 ESLint）标红，增加沟通成本。
三、补充：Vue 组件名的命名规范
Vue 官方明确建议：
- 模板中：使用 kebab-case（全小写 + 短横线），如
<router-link>、<my-component>； - 脚本中：使用 PascalCase（大驼峰），如
import RouterLink、const MyComponent = { ... }。
