说明

类比

本文实现的效果，类似下图属性窗口，点击【红框】按钮，下面可以 实现切换

本文案例效果图

实现功能：通过点击 超链接，实现切换显示组件

特点：页面内容改动，但不刷新，也没有请求服务器

概念：路由组件

与普通组件不同，是通过路由控制 显示的组件，叫 路由组件

创建 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（重要）

增加以下内容（只改一次）：

引入 VueRouter
引入 路由器文件
将路由配置到 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')

测试访问

启动服务，访问网页，发现链接后面会带有 # 号，说明路由开始工作了，如下图：

注意：但是页面还是空白

修改 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>

访问网页

访问网页，只显示 导航超链接，不显示组件，如下图：

点击超链接的变化

点击超链接 学生管理，有以下变化：

切换显示学生管理组件

url后面会带有 `student`

如下图：

该超链接有 `action` 样式