《通信软件前端开发》课件-33.vue3嵌套路由配置与页面跳转

《通信软件前端开发》vue3嵌套路由配置与页面跳转案例导入：复杂页面的结构需求场景描述通信报警系统首页包含顶部导航和左侧侧边栏，点击侧边栏选项（如设备列表、报警记录）时，主内容区需动态显示对应子页面，且整体布局保持不变。核心问题面对具有明显层级关系的页面结构，若为每个子页面配置独立一级路由会导致代码冗余，且难以维护层级关系，该如何设计路由？解决方案使用VueRouter提供的嵌套路由（NestedRoutes）功能，在路由组件内部定义子路由，实现层级化页面结构。嵌套路由层级结构示意图知识讲解：什么是嵌套路由定义：路由的层级结构允许在父路由组件内部定义子路由组件。父路由匹配时渲染父组件，子路由在父组件内的<router-view>位置渲染。应用场景：层级关系页面主页面包含多个子页面（如首页含设备管理、用户管理）。组件内部根据条件动态显示不同子组件。核心概念：父路由与子路由父路由：包含子路由的路由，其组件为父组件。子路由：被包含的路由，其组件为子组件。核心概念：嵌套路由出口在父组件的模板中，需要放置一个<router-view>标签，用于渲染匹配到的子路由组件，实现内容的嵌套展示。知识讲解：嵌套路由的配置规则父路由配置首先配置父路由，其component属性指向父组件，作为子路由的容器。子路由配置(children)在父路由对象中添加children数组，数组内包含所有子路由规则，包含path、name、component等属性。子路由路径(path)通常使用相对路径（不以/开头），相对于父路由路径；若以/开头则为绝对路径，相对于根路径。默认子路由设置path为空字符串的子路由，访问父路由时将默认渲染该子组件。实操教学：配置嵌套路由（TypeScript）核心机制通过在父路由配置中添加children数组定义子路由，path为空表示默认子路由；父组件必须包含<router-view>标签作为子组件的渲染出口。//1.路由配置(router/index.ts)constroutes=[{path:'/home',name:'Home',component:Home,children:[//子路由配置{path:'',name:'DeviceList',component:DeviceList},//默认子路由{path:'alarm-list',name:'AlarmList',component:AlarmList},{path:'system-settings',name:'SystemSettings',component:SystemSettings}]}];//2.父组件模板(Home.vue)<template><divclass="home"><nav><!--导航链接--></nav><router-view/>//子路由出口</div></template>实操教学：实现子路由导航（声明式）核心概念声明式导航：使用<router-link>组件实现导航，VueRouter的标准做法。相对路径：子路由导航时使用相对路径（如to="alarm-list"），无需写全路径。视图渲染：点击链接后，子组件会渲染在父组件的<router-view>中。<!--侧边栏导航--><nav><router-linkto=".">设备列表(默认)</router-link><router-linkto="alarm-list">报警记录</router-link><router-linkto="system-settings">系统设置</router-link></nav><!--子路由出口，子组件将在这里渲染--><main><router-view/></main>代码实现示例(Home.vue)总结：使用相对路径的声明式导航是实现子路由切换的高效方式，能清晰地映射路由层级关系。实操：子路由编程式导航核心要点通过useRouter获取路由实例，调用push方法实现导航。支持相对路径（如'alarm-list'），会自动拼接父路由路径（如'/home/alarm-list'），适用于动态条件跳转。<!--模板部分：按钮触发事件--><button@click="goTo('alarm-list')">报警记录</button><!--脚本部分：编程式导航逻辑-->import{useRouter}from'vue-router';constrouter=useRouter();constgoTo=(path:string)=>{//使用相对路径进行编程式导航router.push(path);};核心代码示例(Home.vue)知识讲解：嵌套路由的页面跳转特点核心区别总结：嵌套路由通过层级化的URL路径和组件渲染机制，实现了复杂页面的结构化管理，同时支持相对路径导航，提升了开发效率。路径的层级关系URL由父路由与子路由路径自然组合而成，清晰反映页面结构。父子组件同时渲染，子组件内容填充在父组件的<router-view>中。组件的嵌套渲染子组件内支持相对路径导航，代码简洁且易于维护层级关系。导航的相对路径深入解析嵌套路由在路径、渲染及导航方面的核心机制实战总结——理论与实践结合：通过本次实战，将理论知识转化为实际代码能力，深入理解Vue路由在复杂页面结构中的应用。实操教学：通信报警系统嵌套路由实战需求分析：首页布局与嵌套路由为通信报警系统首页（Home.vue）配置嵌套路由。实现带有侧边栏的首页布局，当用户点击侧边栏中的“设备列表”、“报警记录”或“系统设置”选项时，在主内容区域动态地显示对应的子页面内容。核心目标：掌握层级路由设计流程完整走一遍嵌套路由的配置和实现流程。从创建父组件和子组件，到配置嵌套路由规则，再到实现子路由的导航和渲染，最终掌握如何为具有层级结构的页面设计和实现路由。核心要点：掌握Vue嵌套路由的核心实现流程——组件创建是基础，路由配置是关键，导航与出口是载体，测试验证是保障。理解父子路由关系及默认路由的设置。实操教学：实现步骤步骤1-2：组件与路由配置创建组件：创建父组件Home.vue和三个子组件（DeviceList.vue、AlarmList.vue和SystemSettings.vue）。配置嵌套路由：在router/index.ts中，为父路由/home配置children数组，定义子路由规则并设置默认子路由。步骤3-4：渲染与验证实现导航和渲染：在Home.vue中添加侧边栏导航菜单(<router-link>)，并在主内容区添加<router-view>出口。测试验证：运行项目，访问/home路径，测试侧边栏导航是否能正常切换显示不同的子组件。实操教学：创建父组件和子组件（TypeScript）父组件Home作为应用的入口页面，包含导航栏和路由占位符，负责整体布局。功能子组件创建DeviceList、AlarmList等子组件，封装各自独立的业务展示逻辑。路由占位符在父组件中使用<router-view/>标签，为子组件的动态挂载预留位置。<!--views/Home.vue(父组件)--><template><divclass="home"><router-view/></div></template><!--views/DeviceList.vue(子组件)--><template><divclass="device-list"><h2>设备列表子页面</h2></div></template>VueComponentsStructure核心要点通过父子组件的拆分，实现页面结构的解耦。父组件负责骨架和导航，子组件负责具体业务展示，通过路由实现动态切换。实操教学：配置嵌套路由规则嵌套路由结构父路由配置children数组默认子路由path为空，访问父路由默认显示相对路径自动拼接父路由path//router/index.tsimport{createRouter,createWebHistory}from'vue-router';importHomefrom'../views/Home.vue';//懒加载子组件constDeviceList=()=>import'../views/DeviceList.vue';constroutes=[{path:'/home',name:'Home',component:Home,children:[{path:'',name:'DeviceList',component:DeviceList},{path:'alarm-list',name:'AlarmList',component:AlarmList},{path:'system-settings',name:'SystemSettings',component:SystemSettings},]},];constrouter=createRouter({history:createWebHistory(process.env.BASE_URL),routes,});exportdefaultrouter;实操教学：侧边栏导航与子路由出口相对路径导航使用相对路径（如to="."）构建导航，确保路由层级关系正确。子路由出口<router-view>作为子组件的渲染容器，实现页面内容的动态切换。路由嵌套结构通过嵌套路由配置，构建复杂的页面结构，实现模块化开发。<template><divclass="home"><h1>通信报警系统-首页</h1><!--侧边栏导航--><nav><router-linkto=".">设备列表</router-link><router-linkto="alarm-list">报警记录</router-link></nav><!--子路由出口--><main><router-view/></main></div></template>核心要点利用<router-link>实现导航，配合<router-view>作为子路由出口，实现页面内容的动态渲染。执行npmrunserve启动项目，访问http://localhost:8080/home，验证Home组件布局及默认子组件显示。运行与访问点击侧边栏的“报警记录”和“系统设置”链接，验证主内容区域是否能正确切换显示对应的子组件内容。测试子路由导航切换子路由时，检查浏览器地址栏URL是否更新为/home/alarm-list或/home/system-settings，确认路径层级正确。观察URL变化实操教学：测试验证核心目标：验证嵌套路由配置是否成功，确保页面跳转与URL同步更新。课堂小测选择题：定义嵌套路由的配置项在Vue3中，用于定义嵌套路由的配置项是？A.subRoutes B.children C.nestedRoutes填空题：渲染子路由组件的标签在父组件中，用于渲染子路由组件的标签是______。简答题：嵌套路由的应用场景与步骤简述嵌套路由的应用场景和核心配置步骤。简答题答案应用场景与核心配置步骤场景：页面具有层级关系(如主页面包含子页面)。步骤：1.配置父路由；2.添加children数组；3.父组件中添加<router-view>；4.实现导航。填空题答案<router-view>解析：在父组件的模板中，我们需要使用<router-view>标签来指定子路由组件的渲染位置。答案讲解选择题答案B.children解析：在VueRouter中，我们通过在父路由的配置