第7章 Vue基础路由

第7章

Vue3

路由7.1Vue3路由基础URL与组件精准绑定特定URL对应特定组件,无需后端额外开发路由接口什么是VueRouter无刷新跳转与数据传递Vue3官方路由管理器,管理URL路径与Vue组件的映射关系,实现URL变化但浏览器不刷新页面的跳转效果router-link替代a标签,支持动态路由参数和查询参数传递数据复杂场景路由管控嵌套路由、路由守卫、路由懒加载在HTML与JavaScript中使用VueRouterHTML中使用JavaScript中使用步骤一:引入vue-router@4脚本步骤一:定义路由组件2.步骤二:定义路由配置数组routes径3.步骤三:创建router实例并传入routes4.步骤四:创建应用实例并挂载router步骤二:使用router-link组件创建导航链接,通过to属性指定路径3.步骤三:使用router-view组件作为路由出口,渲染匹配到的组件7.2

动态路由将给定模式的URL映射到同一个组件,适用于内容不同但结构相同的页面/product/2动态段:id/product/1/product/abcProductDetail用冒号:表示动态段,捕获URL中的可变部分作为参数7.2.1

获取路由参数获取路由信息constroute=useRoute()CompositionAPI方式获取当前激活路由访问动态参数route.params.idparams对象包含从URL解析出的动态参数模板中直接使用useRoute用于组件逻辑中,$route用于模板中$route.params.id模板中可直接使用$route便捷访问7.2.2

高级匹配模式自定义正则表达式右上格小字号标题(path:(\user//:idd9+))可重复参数内容*都配零个或多个段,+配配一个或多个段参数以数库形式存于pathMatch中限制则参数格式,如仅匹配数字左下格小字号标题右下格小字号标题可选参数内容大小写下敏感,内容sensitive:true默认在区对大多底宙,加加sensitive使用区分path://\search//query参数可出现零次或一次7.2.3

匹配优先级静态路由path:"/about"优先级最高,无动态部分带静态前缀的动态路由有明确静态前缀同级路由按定义顺序,更具体的放前面多动态段路由"/post/:category/:id"动态段越多越具体自定义正则动态路由"/user/:id(\d+)"正则越严格优先级越高通配符路由"/:pathMatch(.*)*优先级最低,通常处理4047.3.1-7.3.2

动态路由与嵌套路由响应路由参数变化嵌套路由同一组件被复用时setup只执行一次,需显式监听参数变化/dashboard父组件需提供router-view作为子路由渲染出口使用watch监听route.params通用响应式方案settingsprofile使用onBeforeRouteUpdate组件内导航守卫,推荐方案子路由路径不加斜杠settings7.3.3

导航守卫全局前置守卫路由独享守卫组件内守卫onBeforeRouteEnter、onBeforeRouteUpdate、onBeforeRouteLeaverouter.beforeEachbeforeEnter直接定义在路由配置上,仅进入该路由时触发贴近组件业务逻辑,分别在进入前、更新时、离开前调用每次导航触发时异步执行,常用于登录验证应用场景:权限验证、数据预加载应用场景:角色权限检查7.3.4路由元信息&7.3.5路由懒加载路由元信息metameta:{requiresAuth:true,title:"个人中心"}为路由添加自定义数据,可在守卫或组件中访问结合afterEach钩子可动态设置页面标题路由懒加载component:import('../views/About.vue')可通过webpackChunkName将多个组件打包到同一chunk初始加载只下载当前页面代码,访问路由时才加载对应组件7.3.6编程式导航

编程式导航高级技巧与实践总结router.push(location)跳转到新页面,添加history记录keep-alive缓存组件保留页面状态scrollBehavior自定义滚动位置router.rep