《Vue应用开发》课件-5.5动态路由

动态路由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监听路由的变化。<scriptsetup>import{useRoute}from'vue-router'import{watch}from'vue'constroute=useRoute()watch(()=>route.path,path=>{

console.log('路由路径',path)})</script>5.5.1动态路由概述在浏览器中访问:5173/，依次单击子路由链接“tab1”和“tab2”，监听路由变化的效果，如下图所示。

先定一个小目标！掌握动态路径参数值的获取，能够使用$route.params或props获取参数值5.5.2获取动态路径参数值获取动态路径参数值的2种方式：使用$route.params获取参数值、使用props获取参数值。假设在Movie组件中有“电影1”“电影2”“电影3”这3个链接，单击它们会跳转到同一个MovieDetails组件，并展示对应的电影id，用于区分不用id对应的详情页的数据。5.5.2获取动态路径参数值步骤1使用$route.params获取参数值步骤3步骤4步骤2新建src\components\Movie.vue文件，在该文件中定义3个路由链接和路由视图。路由链接路由视图5.5.2获取动态路径参数值步骤1使用$route.params获取参数值步骤3步骤4步骤2>>接上页代码5.5.2获取动态路径参数值5.5.2获取动态路径参数值步骤1步骤3步骤4步骤2修改src\App.vue文件，在“关于”路由链接下方补充定义“电影”路由链接。使用$route.params获取参数值5.5.2获取动态路径参数值步骤1步骤3步骤4步骤2创建src\components\MovieDetails.vue文件，使用$route.params.id获取参数id的值。使用$route.params获取参数值5.5.2获取动态路径参数值修改src\router.js文件，在routes中添加路由匹配规则。步骤1步骤3步骤4步骤2使用$route.params获取参数值在浏览器中访问:5173/。Movie组件初始页面效果、单击“电影1”链接，跳转到MovieDetails组件的效果，如下图所示。Movie组件初始页面效果跳转到MovieDetails组件5.5.2获取动态路径参数值5.5.2获取动态路径参数值使用props获取参数值：VueRouter允许在路由匹配规则中开启props传参。①修改src\components\MovieDetails.vue文件，使用props接收路由规则中匹配到的参数。<template>

<p>电影{{id}}页面</p></template><scriptsetup>constprops=defineProps({

id:String})</script>②在src\router.js文件中，为“:id”路径的路由开启props传参。{path:':id',component:()=>import