Vue 3基础入门 课件 第7章 Vue3路由.pptxVIP

第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方式获取当前激活路由访问动态