《Vue应用开发》课件——5.5动态路由.pptxVIP

动态路由5.5

先定一个小目标！了解什么是动态路由，能够说出动态路径参数的定义方式5.5.1动态路由概述

什么是动态路由？5.5.1动态路由概述

动态路由是一种路径不固定的路由，路径中可变的部分被称为动态路径参数（DynamicSegment），使用动态路径参数可以提高路由规则的可复用性。在VueRouter的路由路径中，使用“:参数名”的方式可以在路径中定义动态路径参数。5.5.1动态路由概述

5.5.1动态路由概述下面通过代码演示如何定义一个动态路由。{path:/sub/:id,component:组件},动态路径参数id为参数名不同动态路径参数的动态路由在进行切换时，由于它们都是指向同一组件，所以Vue不会销毁再重新创建这个组件，而是复用这个组件。如果想要在切换时进行一些操作，就需要在组件内部利用watch来监听路由的变化。注意

5.5.1动态路由概述下面演示如何在About组件中监听路由的变化。在About组件中利用watch监听路由的变化。scriptsetupimport{useRoute}fromvue-routerimport{watch}fromvueconstroute=useRoute()watch(()=route.path,path={?console.log(路由路径,path)})/