Vue企业开发实战（第2版）-课件 项目3 大觅项目的路由配置

《Vue企业开发实战》·Vue3企业级项目教程项目3大觅项目的路由配置任务1什么是前端路由·任务2VueRouter基本使用·任务3页面间导航授课教师：XXX在线票务销售·VueRouter4·SPA导航学习目标掌握用VueRouter搭建大觅路由，并用编程式导航换页01路由原理能说明路由分发：不同URL对应不同处理逻辑或页面02前端路由能对比hash与history，说出SPA里换页为什么不必整页刷新03路由器落地能安装或沿用脚手架路由，建立模块并在应用中启动04重定向与懒加载能把根路径转到首页，并把详情等页改成按需加载05声明式与编程式会用router-link，也会按场景选用push/replace/go项目知识导图三个任务贯穿：原理→配置链条→购票流程怎么跳任务1什么是前端路由路由分发、hash/history、SPA使用场景与利弊任务2VueRouter基本使用安装、路由表、启动、重定向、懒加载、router-link、路由对象任务3页面间导航push进历史、replace换当前、go前进后退项目导读Vue适合做大型单页应用，但本身不带路由官方用插件VueRouter补上这条链条。Vue3搭配的是VueRouter4，支持嵌套路由、懒加载、具名路由等。本项目把大觅的首页、列表、详情、选座、支付串成可运行的导航；后文其它页也会继续走这条链，所以要一次把配置链条走通。原理先搞清URL怎么对应到页面，再谈API。配置安装→路由表→use→router-view，四处缺一处就不跳。流程菜单用router-link；购票过程用push/replace。版本课上按Vue3+Router4写，不再混用2.x写法。TASK01什么是前端路由01路由分发02hash与history03SPA场景与利弊3.1.1什么是路由按路径把请求交给对应的处理逻辑，这就是路由分发假设一台Web服务器地址是，对外提供三个页面。用户访问其中一个地址时，服务端解析路径，再交给对应逻辑——完成一次分发。路径//·站点入口，通常对应首页路径/about/about·关于页路径/concat/concat·联系页（教材示例拼写）一次路由分发怎么走以前这件事多半在后台；前端路由是把同一件事拿到JS里做01用户访问浏览器对某个完整URL发起访问，例如…/about。02解析路径程序取出路径段/about，而不是整段域名。03匹配规则在路由表里找到这条路径对应的处理逻辑或组件。04交给处理后台就返回html；前端就在当前页里换一块视图。后端路由和前端路由原理一样：不同URL展示不同内容；实现位置不一样后端路由•用户请求URL，服务器导航到具体html页面•每次换页都向服务器要新页面•一定有网络往返，可能闪白、有延迟•适合传统多页：每个栏目一个html•大觅若这样搭，头尾、脚本会重复加载前端路由•在JS里配置：路径↔组件•换页主要是改路径、换视图，公共资源留下•这就是单页应用SPA的换页方式•后端仍负责接口和数据，不负责每个栏目一份html•登录、下单校验仍在服务端，前端路由不管权限本身3.1.2前端路由怎么读路径historyAPI出现之前，前端多用hash；Web服务会忽略#后面//#/about/#/concatwindow.location.hash//例如"#/about"为什么能工作•服务器不解析hash，#后面当客户端标记•JS能读到hash，再决定渲染哪个组件•刷新不易404，低版本浏览器也能用•地址带#，不好看，也不像“真路径”HTML5提供historyAPI，可以操作浏览器的sessionhistory。VueRouter的createWebHistory走这条路，地址栏是/about而不是/#/about。本项目默认history。hash与history对照课上用history；刷新404时要能说出原因对比项hashhistory地址形态/#/detail/detail谁解析路径JS读location.hash；服务器忽略#后浏览器与前端路由一起处理path刷新一般仍回到同一套SPA，不易404服务器若没配回退，会404观感/分享带#，有人会当成锚点像普通网址，好分享课上选择兼容演示可以提createWebHistory，部署要让所有path回到index.html3.1.3前端路由用在哪更多用在单页应用：前后端分离后，后端不再给每个栏目一份页面路由大觅首页点“戏剧/体育”，详情、选座、支付都还在同一个工程里切。若每个栏目都是完整html，体验和维护都会回到项目1讲过的MPA问题。优点•换页主要改路径，没有再向服务器要一整页的延迟•AJAX只换内容、URL不变时，用户复制不到想要的地址；前端路由让URL跟着视图走，详情可以分享要注意•前进后退要按历史记录走，没有记录时go会失败•history模式部署必须让任意path都能回到SPA入口•前端路由不管登录校验本身，只负责切哪一块视图先画出大觅路径草案命名用英文小写，不要写成list.html/重定向到首页，避免打开站点一片空白/home首页：栏目入口、推荐/list列表，可用query表示戏剧/体育等栏目/detail详情，用query或动态段带演出id/seat→/confirm→/pay购票主路径，后两步常考虑replace/login/user登录、个人中心与订单上机1写出路径表覆盖购票主路径，标出前后步要求•列出大觅主要页面与建议path•标明哪几步是流程中的前后步（选座→确认→支付）•小组互评是否漏了支付/个人中心•不要写成list.html这种文件名•下次课直接拿这张表写routes数组合格路径表完整、命名合理、能口述“这个地址打开哪一页”。漏支付或写成html文件名不算过。TASK02VueRouter基本使用01安装与路由表02启动与router-view03重定向/懒加载/链接3.2.1安装路由Vue3官方推荐VueRouter4；绝大部分应用创建时就会勾选用Vite创建dm时，若「AddVueRouterforSinglePageApplicationdevelopment?」选Yes，会自动装vue-router@4并生成src/router。项目1建议选Yes。没勾选再手动装。npminstallvue-router@4npmlistvue-router装完看版本是4.x。不要误装成3.x。国内网络可用镜像。装完在src下建router/index.js，集中写路由表。脚手架勾选后，打开src/router/index.js就能看到createRouter。后续只要在入口把router安装到应用上，整个项目就具备路由功能。脚手架生成的路由器长什么样history用HTML5模式；routes里是路径与组件的映射import{createRouter,createWebHistory}from'vue-router'importHomeViewfrom'../views/HomeView.vue'constrouter=createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[{path:'/',name:'home',component:HomeView},{path:'/about',name:'about',component:()=>import('../views/AboutView.vue')},],})exportdefaultrouter3.2.2一条路由三部分一个路由是一个对象：path、name、componentimportHelloWorldfrom'@/components/HelloWorld'importLoginfrom'@/pages/login'routes:[{path:'/',//后期改为项目首页name:'HelloWorld',component:HelloWorld},{path:'/login',//登录页name:'Login',component:Login},]对照着记•path：地址栏里的路径•name：命名路由，编程式跳转更稳•component：要渲染的页面组件•再加页面就按同样格式往数组里追加•@能省略.vue，是因为项目1配了别名和Vite•*.vue是单文件组件，模板、脚本、样式写在一起3.2.3启动路由器入口负责创建应用，并把路由安装上去//main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'constapp=createApp(App)app.use(router)app.mount('#app')<!--App.vue--><template><divid="app"><router-view/></div></template>匹配到的组件渲染在<router-view>里。漏app.use(router)，跳转无效；漏router-view，导航有了画面空。先切两个空页面验证，再填业务。组件渲染链路调试时按这条链往回找，不要只盯着某一个文件01index.html浏览器加载页面，根节点是<divid="app"></div>，再引入/src/main.js。02main.jscreateApp(App)，app.use(router)，mount('#app')。03App.vue<router-view/>是占位符，按当前URL放入对应组件。04路由表path对上了，才知道放Home还是Detail。3.2.4路由重定向打开站点应落到首页；全局重定向在匹配当前路径之前执行//目标是路径{path:'/a',redirect:'/b'}//目标是命名路由{path:'/a',redirect:{name:'foo'}}{path:'/b',name:'foo',component:Foo}//目标是方法，可动态决定{path:'/a',redirect:(to)=>{console.log(to)return'/b'}}//大觅常用{path:'/',redirect:'/home'}课上怎么用•用户收藏根地址也能进首页•redirect写目标path或name•方法形式本课知道即可，先把/→/home做稳•和404不是一回事：重定向是“已知要去哪”•写错目标path会跳到空白，先对照路由表3.2.5路由懒加载别把所有页面打进一个JS包，首屏会慢访问到某条路由时再下载对应组件。Vue把组件写成工厂函数，第一次渲染才去解析，并且会缓存结果。Vite会把()=>import(...)打成独立代码块。{path:'/foo',component:()=>import('./Foo.vue')}constHeader=()=>import('@/components/Header.vue')constIndex=()=>import('@/pages/Index.vue')constLogin=()=>import('@/pages/Login.vue')首页可以同步引入，减轻第一眼等待。列表、详情、报表、登录等较大或不常进的页改成懒加载。上机至少一个页面这样写。3.2.6router-link怎么写声明式导航：菜单、卡片用它，不要手写会整页刷新的a<router-linkv-bind:to="'/home'">Home</router-link><router-link:to="'/home'">Home</router-link><router-link:to="{path:'/home'}">Home</router-link><router-link:to="{name:'user',params:{userId:123}}">User</router-link><router-link:to="{path:'/register',query:{plan:'private'}}">Register</router-link><!--结果：/register?plan=private-->渲染结果本质仍是<ahref="/home">，但行为是SPA跳转。•to可以是字符串或对象•params配命名路由•query出现在?后面•当前路由会加激活class，方便菜单高亮为什么用router-link而不是手写a模式切换、无刷新、base、高亮，这四件事它都帮你做了01模式一致hash和history下写法相同，换模式不必改模板。02拦住刷新History模式下自动拦截点击，避免浏览器整页刷新。03base路径配了base会自动加前缀，不必每个to手写拼接。04激活class默认router-link-active/router-link-exact-active，菜单高亮用这个。接到大觅：卡片进详情点击广告卡跳到详情，并用query带上演出id<divclass="ad-card"><router-link:to="{path:'/ticketDesc',query:{id:headCard.id}}"><img:src="headCard.imgUrl"alt=""><divclass="ad-hide"><h3>{{headCard.itemName}}</h3><p>{{headCard.minPrice}}元</p></div></router-link></div>课上对照•整张卡都可点，不必另做按钮•query.id刷新后还在，详情页好取•详情页用useRoute().query.id读•大觅列表、推荐位都是这种跳法•path名字按你们路由表来，教材示例是/ticketDesc3.2.7路由对象常用属性跳转之后，用当前路由信息取路径和参数path当前路径，总是绝对路径，如/foo/barparams动态段参数的键值对象；没有参数时是空对象query查询参数。/foo?user=1则query.user==1hashhash值（不含#）；没有则为空字符串fullPath解析后的完整URL，含查询和hashmatched当前路由匹配到的记录数组，嵌套路由会用到怎么拿到路由对象选项式用this.$route；组合式用useRoute()，属性含义一样import{useRoute}from'vue-router'constroute=useRoute()console.log(route.path)//等价this.$route.pathconsole.log(route.query.id)课上约定•新页面用scriptsetup+useRoute/useRouter•教材若出现this.$route，知道是选项式即可•详情页优先读query.id上机2：安装并启动路由；/重定向到首页；至少一个页面懒加载；导航用router-link。点击栏目能切换，控制台无报错。TASK03页面间导航01push02replace03go按钮跳转不能只用a单击“立即购买/去支付”这种场景，要写代码调路由器实例方法单击<router-link>时，内部其实就是在调router.push。所以菜单用链接，流程里的按钮用方法，两套是同一件事的两种入口。import{useRouter}from'vue-router'constrouter=useRouter()functiongoDetail(id){router.push({path:'/detail',query:{id}})}选项式可用this.$router。组合式必须useRouter()，不要和useRoute()搞混：一个是路由器（去哪），一个是当前路由（现在在哪）。3.3.1router.push向history栈追加一条记录；浏览器后退会回到刚才那一页router.push(location)router.push('home')//字符串router.push({path:'home'})//对象router.push({name:'user',params:{userId:123}})//->/user/123router.push({path:'register',query:{plan:'private'}})///register?plan=private//等价关系//<router-link:to="...">内部就是push大觅怎么用•列表进详情：push+query.id•选座进确认：push，用户还应能返回改座•带数据跳转就用对象形式，不要拼一长串字符串•不要写成location.href，那会整页刷新•path与name不要混用错：有params时优先name3.3.2router.replace和push很像，但不会往历史里加新记录，只替换当前这一条router.replace(location)router.replace({path:'/pay-ok'})//等价<router-link:to="..."replace>什么时候必须replace•登录成功进首页：不应再退回登录表单•确认提交后进支付/成功页•课上用后退键对照：push能回，replace回不到被换掉的页购票主路径建议：首页→列表→详情→选座用push；提交订单离开填表页用replace。先讲清“用户按返回应不应该看见上一张表单”，再选API。3.3.3router.go参数是整数，在历史记录里前进或后退，类似window.history.go(n)router.go(1)//前进一步，等同history.forward()router.go(-1)//后退一步，等同history.back()router.go(3)//前进三步router.go(-2)//后退两步router.go(-100)//记录不够就会失败router.go(100)router.back()//常用别名，等价go(-1)router.forward()图3.5后退/前进/跳步-2/push/replace购票主路径：场景选API先问这一步该不该被返回，再写代码步骤建议理由首页→列表→详情push用户应能后退重新挑演出详情→选座→确认push还可能改座位、改张数确认提交→支付/成功replace避免返回改已提交表单登录成功→原页或首页replace登录页不应留在后退栈里标题栏返回go(-1)/back跟着真实历史走，不要写死path上机3综合导航（教材作业方向）默认首页+导航可点+按钮控制历史作业1四个页面能切•