1、App.vue文件内容如下。（首先提炼需求，通过下面代码RouterLink中的to对应的路径找到相应的组件，然后将组件内容在RouterView中展示。）
<template>
<div id="app">
<h2 class="title">Vue路由切换测试</h2>
<!-- 导航区 -->
<div class="navigate">
<!-- 点击下列导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。可通过在每个组件中添加钩子函数验证 -->
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/news" active-class="active">新闻</RouterLink>
<RouterLink to="/about" active-class="active">关于</RouterLink>
</div>
<!-- 展示区 -->
<div class="main-content">
<RouterView />
</div>
</div>
</template>
<script lang="ts" setup name="App">
import { RouterView, RouterLink } from 'vue-router'
</script>
<style>
/* App */
.title {
text-align: center;
word-spacing: 5px;
margin: 30px 0;
height: 70px;
line-height: 70px;
background-image: linear-gradient(45deg, gray, white);
border-radius: 10px;
box-shadow: 0 0 2px;
font-size: 30px;
}
.navigate {
display: flex;
justify-content: space-around;
margin: 0 100px;
}
.navigate a {
display: block;
text-align: center;
width: 90px;
height: 40px;
line-height: 40px;
border-radius: 10px;
background-color: gray;
text-decoration: none;
color: white;
font-size: 18px;
letter-spacing: 5px;
}
.navigate a.active {
background-color: #64967E;
color: #ffc268;
font-weight: 900;
text-shadow: 0 0 1px black;
font-family: 微软雅黑;
}
.main-content {
margin: 0 auto;
margin-top: 30px;
border-radius: 10px;
width: 90%;
height: 400px;
border: 1px solid;
}
</style>2、创建一个router并将其暴露出去。新建文件src/router/index.ts，代码如下。（现在需要根据to="/xx"去找到对应的组件，所以要先创建一个路由器，制定一些路由规则，这样就能通过匹配路径找到组件并进行挂载。）
import About from "@/views/About.vue";
import Home from "@/views/Home.vue";
import News from "@/views/News.vue";
// 引入createRouter
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
// 创建路由器
const router = createRouter({
// 工作模式
history: createWebHistory(),
// hash: 路径上带'#'
// history: createWebHashHistory(),
// 路由规则
routes: [
{
path: '/home',
component: Home
},
{
path: '/news',
component: News
},
{
path: '/about',
component: About
},
{
path: '/',
redirect: '/home'
}
]
})
// 将router暴露出去
export default router3、准备页面（在src/views目录下新建要跳转的页面）
（1）Home.vue
<template>
<div class="home">
<img src="https://s1.music.126.net/style/favicon.ico?v20180823" alt="" />
</div>
</template>
<script setup lang="ts" name="Home">
</script>
<style scoped>
.home {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
</style>（2）News.vue
<template>
<div class="news">
<ul>
<li><a href="#">新闻001</a></li>
<li><a href="#">新闻002</a></li>
<li><a href="#">新闻003</a></li>
<li><a href="#">新闻004</a></li>
</ul>
</div>
</template>
<script setup lang="ts" name="News">
</script>
<style scoped>
/* 新闻 */
.news {
padding: 0 20px;
display: flex;
justify-content: space-between;
height: 100%;
}
.news ul {
margin-top: 30px;
list-style: none;
padding-left: 10px;
}
.news li>a {
font-size: 18px;
line-height: 40px;
text-decoration: none;
color: #64967E;
text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
width: 70%;
height: 90%;
border: 1px solid;
margin-top: 20px;
border-radius: 10px;
}
</style>（3）About.vue
<template>
<div class="about">
<h2>大家好，欢迎来到直播间</h2>
</div>
</template>
<script setup lang="ts" name="About">
</script>
<style scoped>
.about {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: rgb(85, 84, 84);
font-size: 18px;
}
</style>4、在main.ts中引入并使用路由
// 引入 createApp 用于创建应用
import { createApp } from "vue";
// 引入 App 根组件
import App from './App.vue'
// 引入路由器
import router from "./router";
// 创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到 app 容器中
// .mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。
app.mount('#app')5、扩展--命名路由和嵌套路由以及路由传参。（如果只是想实现一个简单的路由切换效果，其实上面4个步骤已经足够了。作者想继续补充一些东西，但又不想在上面这个案例追加，怕案例变得杂乱，所以补充就写在下面了。东西不多，但原理都是一样的。）
（1）src/router/index.ts文件追加配置项（name 和 children）
import About from "@/views/About.vue";
import Home from "@/views/Home.vue";
import News from "@/views/News.vue";
import NewsDetail from "@/views/NewsDetail.vue";
// 引入createRouter
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
// 创建路由器
const router = createRouter({
// 工作模式
history: createWebHistory(),
// hash: 路径上带'#'
// history: createWebHashHistory(),
// 路由规则：[命名路由: 有name配置项的路由] [嵌套路由: 有子路由的路由，例如children配置项]
routes: [
{
name: 'home',
path: '/home',
component: Home
},
{
name: 'news',
path: '/news',
component: News,
children: [
{
// 子路由 path 前面不能带 '/'，即 path: 'detail'，而不是 path: '/detail'
name: 'newsDetail',
path: 'detail',
component: NewsDetail
}
]
},
{
path: '/about',
component: About
},
{
path: '/',
redirect: '/home'
}
]
})
// 将router暴露出去
export default router（2）NewsDetail.vue如下。追加了子路由，当然也要添加相应的页面
<template>
<ul class="news-list">
<li>编号：xxx</li>
<li>姓名：xxx</li>
<li>年龄：xxx</li>
<li>想知道怎么通过路由传值到该详情页面，请看路由传参。</li>
</ul>
</template>
<script setup lang="ts" name="NewsDetail">
</script>
<style scoped>
.news-list {
list-style: none;
padding-left: 20px;
}
.news-list>li {
line-height: 30px;
}
</style>（3）若想在上一个步骤中显示具体的编号、姓名以及年龄的值，这就需要用到路由传参了，就是通过路由将News组件中的参数对象传递到NewsDetail组件中。为了让大家注意到重点，直接截图。
传递参数如下：
接收参数如下：
也可以通过开发工具查看参数接收情况，如下：
