一、这个项目到底在做什么这个项目是一个非常典型的Vue3 路由入门案例。页面大体分成三块标题区Vue 路由测试 导航区首页 / 新闻 / 关于 内容区根据点击的导航显示不同组件它的核心效果是点击“首页”中间显示Home.vue。点击“新闻”中间显示News.vue。点击“关于”中间显示About.vue。点击新闻列表里的某一条新闻中间右侧显示新闻详情NewsDetail.vue。这个项目本质上是在演示Vue Router 如何根据浏览器地址的变化动态切换页面组件。二、这个项目最核心的一句话你给老师讲的时候先说这一句这个项目主要演示 Vue3 中 Vue Router 的基本使用。通过RouterLink实现页面跳转通过RouterView显示匹配到的组件通过routes路由表建立路径和组件之间的对应关系。这句话非常重要。三、项目目录结构讲解你的目录大概是这样src ├─ assets ├─ components │ ├─ Home.vue │ ├─ News.vue │ ├─ About.vue │ └─ NewsDetail.vue ├─ router │ └─ index.ts ├─ App.vue └─ main.ts逐个解释文件/目录作用main.ts项目入口文件创建 Vue 应用并安装路由App.vue根组件负责整体页面布局router/index.ts路由配置文件定义路径和组件的对应关系Home.vue首页组件News.vue新闻列表组件About.vue关于页面组件NewsDetail.vue新闻详情组件assets存放静态资源例如图片、样式等你可以这样讲Vue 项目启动时会先执行main.ts然后加载根组件App.vue。在App.vue中放置了导航区和展示区。当用户点击导航时Vue Router 会根据router/index.ts中的配置找到对应组件并显示在RouterView位置。四、main.ts 讲解你的main.ts通常是这样import { createApp } from vue import App from ./App.vue import router from ./router const app createApp(App) app.use(router) app.mount(#app)1.import { createApp } from vue意思是从 Vue 中引入createApp方法用来创建一个 Vue 应用实例。Vue3 不是直接new Vue()而是使用createApp(App)2.import App from ./App.vue意思是引入根组件App.vue。整个项目最外层显示的就是App.vue。3.import router from ./router意思是引入路由配置。这里的./router实际上会自动找到src/router/index.ts所以不一定非要写import router from ./router/index写./router就可以。4.const app createApp(App)意思是创建一个 Vue 应用并把App.vue作为根组件。5.app.use(router)这一句最重要。它的意思是把 Vue Router 安装到当前 Vue 应用中。如果没有这句那么你在页面中使用RouterLink / RouterView /可能就不能正常工作。6.app.mount(#app)意思是把 Vue 应用挂载到index.html里面 id 为app的标签上。通常index.html里面会有div idapp/divVue 最终会把页面渲染到这个位置。五、App.vue 讲解App.vue是整个项目的根组件。它大概长这样template div classapp h2 classtitleVue 路由测试/h2 div classnavigate RouterLink to/home active-classxiaozhupeiqi首页/RouterLink RouterLink to/news active-classxiaozhupeiqi新闻/RouterLink RouterLink to/about active-classxiaozhupeiqi关于/RouterLink /div div classmain-content RouterView / /div /div /template这个文件可以分为三部分讲。1. 标题区h2 classtitleVue 路由测试/h2它只是一个普通标题。通过 CSS 设置了居中、背景渐变、圆角、阴影。2. 导航区div classnavigate RouterLink to/home active-classxiaozhupeiqi首页/RouterLink RouterLink to/news active-classxiaozhupeiqi新闻/RouterLink RouterLink to/about active-classxiaozhupeiqi关于/RouterLink /div这里用了三个RouterLink。RouterLink是 Vue Router 提供的组件。它类似于 HTML 里面的a href/home首页/a但是它比普通a更适合 Vue 单页面应用。3. 展示区div classmain-content RouterView / /div这里非常重要。RouterView是路由组件的展示出口。你可以把它理解成一个“占位符”当前路径匹配到哪个组件哪个组件就显示在RouterView这个位置。例如当前地址是/home那么RouterView显示Home /当前地址是/news那么RouterView显示News /当前地址是/about那么RouterView显示About /六、RouterLink 知识点1. RouterLink 是什么RouterLink是 Vue Router 提供的跳转组件。写法RouterLink to/home首页/RouterLink作用点击后跳转到/home路径。2. RouterLink 和 a 标签区别普通 HTML 写法a href/home首页/aVue Router 写法RouterLink to/home首页/RouterLink区别是对比项a标签RouterLink是否刷新页面会刷新不会整体刷新是否适合 Vue 单页面应用不太适合适合跳转方式浏览器重新请求页面前端路由切换组件用户体验页面可能闪一下更流畅你可以讲在 Vue 单页面应用中页面并不是每次都重新向服务器请求而是通过前端路由切换组件所以我们一般使用RouterLink而不是普通的a标签。3.to属性RouterLink to/news新闻/RouterLinkto表示要跳转的目标路径。这里点击“新闻”后地址栏会变成/news然后路由表会去找有没有path: /news如果找到就显示对应组件。4.active-class属性RouterLink to/home active-classxiaozhupeiqi首页/RouterLinkactive-class表示当前链接被激活时自动加上的 class 名。比如你当前在/home页面那么首页这个RouterLink会自动加上classxiaozhupeiqi然后 CSS 就会生效.navigate a.xiaozhupeiqi { background-color: #64967e; color: #ffc268; font-weight: 900; }所以你看到当前选中的导航会变颜色。七、RouterView 知识点1. RouterView 是什么RouterView是路由组件出口。写法RouterView /作用用来显示当前路径匹配到的组件。2. RouterView 怎么知道显示哪个组件它不是自己猜的而是根据router/index.ts中的路由表决定的。比如路由表中有{ path: /home, component: Home }当地址栏是/home那么RouterView就显示Home.vue。3. RouterView 可以有多个吗可以。你的项目里就有两个层级的RouterView。第一个在App.vue中RouterView /它负责显示一级页面Home.vue News.vue About.vue第二个在News.vue中RouterView /它负责显示新闻详情NewsDetail.vue这就是嵌套路由。八、router/index.ts 讲解这个文件是整个项目的核心。它大概是这样import { createRouter, createWebHistory } from vue-router import Home from ../components/Home.vue import News from ../components/News.vue import About from ../components/About.vue import NewsDetail from ../components/NewsDetail.vue const router createRouter({ history: createWebHistory(), routes: [ { path: /, redirect: /home }, { path: /home, component: Home }, { path: /news, component: News, children: [ { path: detail/:id/:title/:content, component: NewsDetail } ] }, { path: /about, component: About } ] }) export default router1. 引入路由方法import { createRouter, createWebHistory } from vue-router这里引入了两个东西名称作用createRouter创建路由器createWebHistory创建 history 路由模式2. 引入页面组件import Home from ../components/Home.vue import News from ../components/News.vue import About from ../components/About.vue import NewsDetail from ../components/NewsDetail.vue这几行的意思是把各个 Vue 组件引入进来后面配置路由时使用。注意你现在用了相对路径../components/Home.vue意思是从当前文件src/router/index.ts出发先回到 src 再进入 components 找到 Home.vue3. 创建路由器对象const router createRouter({ history: createWebHistory(), routes: [...] })这句意思是创建一个路由器并配置路由模式和路由规则。4. history: createWebHistory()history: createWebHistory()它表示使用 HTML5 history 模式。这种模式下地址栏是这种形式http://localhost:5173/home http://localhost:5173/news http://localhost:5173/about还有一种常见模式叫 hash 模式地址栏会这样http://localhost:5173/#/home你这个项目用的是更常见、更干净的 history 模式。5.routes 路由表routes: [ { path: /home, component: Home } ]路由表本质上就是路径和组件的对应关系。比如路径组件/homeHome.vue/newsNews.vue/aboutAbout.vue九、重定向 redirect{ path: /, redirect: /home }这叫重定向。意思是当用户访问根路径/时自动跳转到/home。比如用户打开http://localhost:5173/页面会自动变成http://localhost:5173/home然后显示首页。你讲的时候可以说我设置了一个默认首页。当用户访问项目根路径时会自动重定向到/home提升用户体验。十、一级路由讲解你项目里的一级路由有三个{ path: /home, component: Home }, { path: /news, component: News }, { path: /about, component: About }它们显示在App.vue的这个位置RouterView /对应关系是/home - App.vue 里的 RouterView 显示 Home.vue /news - App.vue 里的 RouterView 显示 News.vue /about - App.vue 里的 RouterView 显示 About.vue这就是一级路由。十一、嵌套路由讲解你的新闻详情用了嵌套路由{ path: /news, component: News, children: [ { path: detail/:id/:title/:content, component: NewsDetail } ] }这里的意思是/news页面下面还有子页面。完整路径是/news/detail/:id/:title/:content例如/news/detail/001/新闻001/这是新闻001的详细内容这时App.vue里面的RouterView显示News.vue。News.vue里面的RouterView显示NewsDetail.vue。所以它是两层显示关系。十二、为什么子路由 path 不加/你这里写的是path: detail/:id/:title/:content而不是path: /detail/:id/:title/:content原因是子路由的 path 一般不要以/开头。因为它是挂在父路由/news下面的。所以最终完整路径是/news/detail/:id/:title/:content如果你在子路由前面加/它就可能变成从根路径开始匹配不再是/news的子路由。这个地方老师可能会问。你可以答子路由路径不加/表示它会拼接在父路由/news后面。十三、动态路由参数讲解你这个路由里有path: detail/:id/:title/:content里面的:id :title :content叫动态路由参数。它的作用是让同一个组件根据不同参数显示不同内容。比如/news/detail/001/新闻001/这是新闻001的详细内容 /news/detail/002/新闻002/这是新闻002的详细内容 /news/detail/003/新闻003/这是新闻003的详细内容这三个路径都会显示NewsDetail.vue但是显示的数据不同。十四、News.vue 讲解News.vue是新闻列表页面。核心代码大概是template div classnews ul li v-foritem in newsList :keyitem.id RouterLink :to/news/detail/${item.id}/${item.title}/${item.content} {{ item.title }} /RouterLink /li /ul div classnews-content RouterView / /div /div /template script setup langts import { reactive } from vue const newsList reactive([ { id: 001, title: 新闻001, content: 这是新闻001的详细内容 }, { id: 002, title: 新闻002, content: 这是新闻002的详细内容 }, { id: 003, title: 新闻003, content: 这是新闻003的详细内容 } ]) /script1. reactive 是什么import { reactive } from vuereactive是 Vue3 中用来创建响应式对象或数组的方法。这里const newsList reactive([ { id: 001, title: 新闻001, content: 这是新闻001的详细内容 } ])意思是创建一个响应式新闻数组。虽然这个案例里新闻数据没有修改但用reactive可以体现 Vue3 的响应式写法。2. v-for 是什么li v-foritem in newsList :keyitem.idv-for是 Vue 的列表渲染指令。意思是遍历newsList数组每一条新闻生成一个li。如果newsList有 4 条数据就会生成 4 个li。3. item 是什么v-foritem in newsList这里的item表示当前遍历到的新闻对象。比如第一轮item { id: 001, title: 新闻001, content: 这是新闻001的详细内容 }第二轮item { id: 002, title: 新闻002, content: 这是新闻002的详细内容 }4. :key 是什么:keyitem.idkey是 Vue 用来识别每一项列表的唯一标识。它的作用是帮助 Vue 更高效、更准确地更新列表。一般写法:keyitem.id不要随便用数组下标作为 key。5.{{ item.title }}是什么{{ item.title }}这是 Vue 的插值表达式。作用是把 JavaScript 数据显示到页面上。比如item.title 新闻001页面就显示新闻0016.:to是什么RouterLink :to/news/detail/${item.id}/${item.title}/${item.content}这里的:to是动态绑定。普通写法to/home动态写法:to变量或表达式这里使用了模板字符串/news/detail/${item.id}/${item.title}/${item.content}如果当前item是{ id: 001, title: 新闻001, content: 这是新闻001的详细内容 }那么最终路径就是/news/detail/001/新闻001/这是新闻001的详细内容十五、NewsDetail.vue 讲解新闻详情组件大概是这样template ul classnews-list li编号{{ route.params.id }}/li li标题{{ route.params.title }}/li li内容{{ route.params.content }}/li /ul /template script setup langts import { useRoute } from vue-router const route useRoute() /script1. useRoute 是什么import { useRoute } from vue-router const route useRoute()useRoute()用来获取当前路由信息。它可以拿到当前路径 路由参数 查询参数 路由元信息在你这个项目里主要用它拿动态参数。2. route.params 是什么{{ route.params.id }} {{ route.params.title }} {{ route.params.content }}route.params保存的是动态路由参数。你的路由配置是path: detail/:id/:title/:content所以可以拿到route.params.id route.params.title route.params.content例如当前地址是/news/detail/001/新闻001/这是新闻001的详细内容那么route.params.id // 001 route.params.title // 新闻001 route.params.content // 这是新闻001的详细内容十六、Home.vue 讲解Home.vue负责首页展示。大概是template div classhome img srchttps://www.jlnu.edu.cn/images/logo.png alt吉林师范大学 logo /div /template这里主要知识点1. 组件化Home.vue是一个独立组件。Vue 项目不是把所有代码都写在一个 HTML 里而是拆成多个.vue文件。每个.vue文件就是一个组件。2. templatetemplate ... /templatetemplate里面写页面结构。类似 HTML。3. style scopedstyle scoped .home { ... } /stylescoped表示当前样式只作用于当前组件不会污染其他组件。这是 Vue 单文件组件里的常用写法。十七、About.vue 讲解About.vue是关于页面。它比较简单template div classabout h2大家好欢迎来到 Vue Router 路由测试页面/h2 /div /template它的作用是演示/about路径对应一个独立页面组件。十八、CSS 样式知识点讲解你的样式主要集中在App.vue和几个组件里。1. text-aligntext-align: center;让文字水平居中。2. marginmargin: 30px 0;表示上下 30px 左右 03. height 和 line-heightheight: 70px; line-height: 70px;当一行文字的line-height和盒子高度一样时文字会垂直居中。4. background-imagebackground-image: linear-gradient(45deg, gray, white);设置渐变背景。45deg表示渐变角度。5. border-radiusborder-radius: 10px;设置圆角。6. box-shadowbox-shadow: 0 0 2px;设置阴影。7. display: flexdisplay: flex;开启弹性布局。8. justify-contentjustify-content: space-around;表示主轴方向均匀分布。在导航区里就是让三个链接均匀排开。9. align-itemsalign-items: center;表示交叉轴居中。常用于垂直居中。10. text-decorationtext-decoration: none;去掉超链接默认下划线。11. letter-spacingletter-spacing: 5px;设置文字之间的间距。十九、TypeScript 知识点你的文件后缀是main.ts index.ts说明你用的是 TypeScript。TypeScript 是 JavaScript 的增强版。它主要增加了类型检查。比如普通 JSlet age 18 age helloJavaScript 不会提前报错。TypeScript 可以限制let age: number 18 age hello // 报错不过你这个项目目前 TypeScript 用得比较浅主要就是文件后缀是.tsVue 文件里写script setup langts /script意思是当前 script 部分使用 TypeScript 语法。二十、script setup 知识点Vue3 里常见写法script setup langts import { reactive } from vue /scriptscript setup是 Vue3 的组合式 API 语法糖。它的好处是写法更简洁变量和方法可以直接在模板中使用。例如script setup langts const name 张三 /script template div{{ name }}/div /template不需要再写export default { setup() { return { name } } }所以script setup更适合 Vue3 新项目。二十一、组件化知识点这个项目用了多个组件App.vue Home.vue News.vue About.vue NewsDetail.vue组件化的好处是好处说明结构清晰每个页面一个组件便于维护修改新闻页不会影响首页便于复用某些组件可以多处使用代码分离HTML、JS、CSS 都集中在对应组件里你可以讲Vue 的核心思想之一就是组件化开发。这个项目把首页、新闻页、关于页、新闻详情页拆成不同组件再通过路由进行切换。二十二、单页面应用 SPA 知识点Vue 项目通常是 SPA。SPA 全称是Single Page Application中文叫单页面应用意思是整个网站本质上只有一个 HTML 页面切换页面时不是重新加载 HTML而是通过 JavaScript 动态切换组件。传统网站点击首页 - 请求 home.html 点击新闻 - 请求 news.html 点击关于 - 请求 about.htmlVue 单页面应用点击首页 - 显示 Home 组件 点击新闻 - 显示 News 组件 点击关于 - 显示 About 组件所以 Vue Router 就是 SPA 中负责“页面切换”的工具。二十三、整个项目运行流程这个流程你一定要会讲。第一步浏览器打开项目例如http://localhost:5173/第二步执行 main.tsconst app createApp(App) app.use(router) app.mount(#app)Vue 应用被创建并挂载。第三步加载 App.vue页面显示标题区、导航区、内容区。第四步遇到 RouterViewRouterView /Vue Router 检查当前路径。第五步路径/被重定向到/home因为路由里写了{ path: /, redirect: /home }第六步匹配/home{ path: /home, component: Home }于是RouterView显示Home.vue。第七步用户点击新闻RouterLink to/news新闻/RouterLink地址变成/newsRouterView显示News.vue。第八步用户点击某条新闻地址变成/news/detail/001/新闻001/这是新闻001的详细内容这时外层RouterView显示News.vue。内层RouterView显示NewsDetail.vue。二十四、老师可能问的问题和回答问题 1Vue Router 是干什么的答Vue Router 是 Vue 官方的路由管理工具主要用于单页面应用中的页面跳转。它可以根据浏览器地址的变化动态显示不同组件。问题 2RouterLink 是什么答RouterLink 是 Vue Router 提供的跳转组件作用类似于a标签但它不会刷新整个页面而是通过前端路由切换组件。问题 3RouterView 是什么答RouterView 是路由组件的显示出口。当前路径匹配到哪个组件哪个组件就会显示在 RouterView 的位置。问题 4路由表是什么答路由表就是路径和组件的映射关系。例如/home对应Home.vue/news对应News.vue。问题 5为什么访问/会显示首页答因为我配置了重定向{ path: /, redirect: /home }当访问根路径/时会自动跳转到/home。问题 6什么是嵌套路由答嵌套路由就是在一个路由组件内部继续配置子路由。比如/news显示新闻页面而/news/detail/:id/:title/:content显示新闻页面内部的新闻详情。问题 7为什么 News.vue 里面也有 RouterView答因为新闻详情是新闻页面下面的子页面所以需要在News.vue中再放一个RouterView用来显示子路由对应的NewsDetail.vue。问题 8:id、:title、:content是什么答它们是动态路由参数。不同新闻可以通过不同参数传递编号、标题和内容然后在详情页中通过useRoute()获取这些参数。问题 9useRoute 是什么答useRoute()是 Vue Router 提供的组合式 API用来获取当前路由对象。通过它可以拿到当前路径、参数、查询参数等信息。问题 10active-class 有什么用答active-class用来设置当前路由链接激活时的样式。比如当前在首页时“首页”按钮会自动应用指定样式。二十五、你可以直接背的 2 分钟讲解稿你可以这样讲老师我这个项目是一个 Vue3 路由基础案例主要演示 Vue Router 的使用。整个页面分为标题区、导航区和内容展示区。导航区使用RouterLink实现跳转内容区使用RouterView显示当前路径匹配到的组件。在main.ts中我通过createApp(App)创建 Vue 应用然后通过app.use(router)安装路由最后通过app.mount(#app)挂载应用。在router/index.ts中我使用createRouter创建路由器使用createWebHistory设置 history 路由模式并在routes中配置了路径和组件之间的对应关系。比如/home对应Home.vue/news对应News.vue/about对应About.vue。同时我设置了/重定向到/home这样用户一进入页面就能看到首页。在App.vue中我使用三个RouterLink作为导航按钮分别跳转到首页、新闻和关于页面。下方的RouterView是一级路由出口会根据当前路径显示不同组件。新闻模块中我还使用了嵌套路由。/news对应新闻列表页面新闻页面内部还有一个RouterView用于显示新闻详情组件。点击新闻列表时会跳转到/news/detail/:id/:title/:content这样的动态路径然后在NewsDetail.vue中通过useRoute()获取路由参数并显示新闻编号、标题和内容。所以这个项目涉及的核心知识点包括Vue3 组件化、Vue Router、RouterLink、RouterView、路由表、重定向、嵌套路由、动态路由参数、useRoute 和 active-class。二十六、你这个项目的知识点总清单你下周讲课需要掌握这些1. Vue3 项目基本结构 2. main.ts 入口文件 3. App.vue 根组件 4. 单文件组件 .vue 5. template / script setup / style scoped 6. createApp 创建应用 7. app.use(router) 安装路由 8. app.mount(#app) 挂载应用 9. Vue Router 的作用 10. createRouter 创建路由器 11. createWebHistory 路由模式 12. routes 路由表 13. path 路径 14. component 组件 15. redirect 重定向 16. RouterLink 路由跳转 17. RouterView 路由出口 18. active-class 激活样式 19. 一级路由 20. 嵌套路由 21. children 子路由 22. 动态路由参数 23. useRoute 获取当前路由 24. route.params 获取参数 25. reactive 响应式数据 26. v-for 列表渲染 27. :key 列表唯一标识 28. :to 动态绑定跳转路径 29. 插值表达式 {{ }} 30. CSS flex 布局你不用每个都讲很深但这些词最好都知道是什么意思。二十七、最关键的理解图你可以在脑子里记住这个流程用户点击 RouterLink ↓ 浏览器地址发生变化 ↓ Vue Router 检查 routes 路由表 ↓ 找到 path 对应的 component ↓ 把组件显示到 RouterView 中例如点击“新闻” ↓ 路径变成 /news ↓ 路由表找到 path: /news ↓ 对应 component: News ↓ App.vue 的 RouterView 显示 News.vue再比如点击“新闻001” ↓ 路径变成 /news/detail/001/新闻001/这是新闻001的详细内容 ↓ 匹配 /news 的子路由 detail/:id/:title/:content ↓ News.vue 内部的 RouterView 显示 NewsDetail.vue ↓ NewsDetail.vue 使用 useRoute() 读取参数并显示二十八、你现在最应该重点掌握的 5 个点你下周讲给老师听最重要不是背代码而是把这 5 个点讲清楚1. 路由表路径和组件的对应关系。path: /home, component: Home2. RouterLink负责跳转。RouterLink to/home首页/RouterLink3. RouterView负责显示组件。RouterView /4. 嵌套路由新闻详情属于新闻页面内部所以放在children中。children: [ { path: detail/:id/:title/:content, component: NewsDetail } ]5. useRoute获取当前路由参数。const route useRoute(){{ route.params.id }}这个项目虽然小但知识点很完整。它不是单纯三个页面跳来跳去而是已经包含了 Vue Router 入门里最核心的一套内容一级路由 嵌套路由 动态参数 路由激活样式。