vue3.x教程：路由第一个案例（RouterLink、RouterView） 作者：马育民 • 2026-07-31 21:39 • 阅读：10000 # 说明 ### 类比 本文实现的效果，类似下图属性窗口，点击【红框】按钮，下面可以 **实现切换** [](/upload/0/0/1IX8YZyLJDnU.jpg) ### 本文案例效果图 [](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-08_12-50-56.png) **实现功能：**通过点击 **超链接**，实现切换显示组件 **特点：**页面内容改动，但不刷新，也没有请求服务器 # 概念：路由组件 与普通组件不同，是通过 **路由** 控制 **显示的组件**，叫 **路由组件** # 创建 views 目录 在 `src` 目录下，创建 `views` 目录，**路由组件** 都放在这个目录下 # 创建组件 ### 创建 Student 组件 普通组件，无特殊改动 在 `views` 目录下，创建 `Student.vue` 文件，内容如下： ``` <template> <div class="app"> <div>学生信息</div> <div>姓名：{{name}}</div> </div> </template> <script lang="ts" setup> import {ref} from 'vue' const name = ref('李雷') </script> <style scoped> .app{ border: 1px red solid; } </style> ``` ### 创建 Teacher 组件 普通组件，无特殊改动 在 `views` 目录下，创建 `Teacher.vue` 文件，内容如下： ``` <template> <div class="app"> <div>教师信息</div> <div>姓名：{{name}}</div> </div> </template> <script lang="ts" setup> import {ref} from 'vue' const name = ref('Miss Gao') </script> <style scoped> .app{ border: 1px green solid; } </style> ``` # 创建 路由文件（重要） 在 `src` 目录下创建 `router` 目录，在 `router` 目录下，创建 `index.ts` 文件 **作用：**该文件配置的是 **路由信息** **注意：**该路由文件只需要 **一个** 内容如下： ``` // 引入 import {createRouter, createWebHashHistory} from 'vue-router' //引入组件 import student from '@/views/Student.vue' import teacher from '@/views/Teacher.vue' // 创建路由器，需要传入 {} 对象 // (一个工程只需要创建一个路由器对象) const router = createRouter({ history: createWebHashHistory(), // 路由器的工作模式 routes : [ // 注意：是 routes，不是router，其value是数组，数组里面的元素是 {} 对象 { path: '/student', //路径，相当于<a>标签的href，关键：必须以 “/” 开头 component: student //组件 }, { path: '/teacher', //路径 component: teacher //组件 } ] }) // 暴露路由，让其他页面可以使用 export default router ``` **解释：**每个路由映射一个组件 - `path` 属性值 对应 `<router-link to="">` 中的 `to` 属性值。相当于 `<a>` 标签的 `href` 属性 **注意：** 必须以 `/` 开头 - `component` 属性值 是组件 # 修改 main.ts（重要） 增加以下内容（只改一次）： 1. 引入 `VueRouter` 2. 引入 `路由器文件` 3. 将路由配置到 `Vue` 对象中 内容如下： ``` // import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' // 关键：引入路由器文件======================= // import router from './router/index' // 完整写法 import router from './router' //由于文件名是index，所以可以省 const app = createApp(App) // 关键：使用路由 app.use(router) app.mount('#app') ``` ### 测试访问 启动服务，访问网页，发现链接后面会带有 `#` 号，说明路由开始工作了，如下图： [](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-08_19-24-41.png) **注意：**但是页面还是空白 # 修改 App.vue（重要） 显示 **导航** 和 **组件** 的 ### RouterLink 标签 `<RouterLink active-class="action" to="/student">` 标签作用： - 使用 `<RouterLink>` 组件来导航，默认会被渲染成一个 `<a>` 标签 - `to`：属性值是 路由组件中的 `path`。渲染为 `href` 属性，`#`开头的hash地址 - `active-class="action"`，显示哪个组件，哪个组件的 `<a>` 标签就加上 `action` 样式 ### RouterView 标签 路由匹配的组件，渲染在这里 ``` <RouterView></RouterView> ``` ### 完整代码 ``` <template> <div id="app"> RouterLink：相当于超链接，切换组件<br> <RouterLink active-class="action" to="/student">学生管理</RouterLink><br> <RouterLink active-class="action" to="/teacher">教师管理</RouterLink><br> RouterView：组件显示区域<br> <RouterView></RouterView> </div> </template> <script lang="ts" setup> import { RouterView, RouterLink } from 'vue-router' </script> <style> #app { text-align: center; color: #2c3e50; margin-top: 60px; } .action{ color: red; } a{ color: blue; } </style> ``` # 访问网页 访问网页，只显示 **导航超链接**，**不显示组件**，如下图： [](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-08_19-32-38.png) # 点击超链接 的变化 点击超链接 `学生管理`，有以下变化： ### 切换显示 学生管理组件 [](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-08_20-20-22.png) ### url后面会带有 `student` 如下图： [](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-08_20-23-28.png) ### 该超链接有 `action` 样式 如下图： [](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-02-08_20-50-12.png) # 特点 实现 **单页面** 应用，页面内容改动，但不刷新，也没有请求服务器 原文出处：http://malaoshi.top/show_1GW3mL39vLtB.html