vue3路由参数传递与接收queryparams27课件讲解.pptxVIP

《通信软件前端开发》主讲教师：时泽汉vue3路由参数传递与接收（query/params）

案例导入：动态数据的传递需求场景描述在通信报警系统中，设备列表页展示所有设备信息。当用户点击设备时，需跳转至详情页并显示该设备的具体信息（如ID、名称、状态等）。核心问题如何在从设备列表页跳转到设备详情页的过程中，将用户点击的设备ID和名称等信息传递过去？解决方案使用路由参数传递功能，VueRouter提供了query和params两种方式来实现数据传递。路由参数传递示意图

路由参数的两种方式方式一：Query参数定义：以键值对形式附加在URL末尾，以?开头，分隔。示例：/device/detail?id=1name=设备A方式二：Params参数定义：嵌入到URL路径中，需在路由规则中用动态参数定义。示例：/device/detail/1Query参数特点参数显示在URL中，属于可选参数，无需在路由规则中预先定义，常用于非核心筛选条件。Params参数特点参数嵌入在URL路径中，属于必填参数，必须在路由规则中定义，常用于核心资源标识。

Query参数的特点显示在URL中参数会以键值对的形式清晰地显示在URL的末尾，用户可以直接看到传递的参数。可选性query参数是可选的，我们可以传递，也可以不传递，不会影响路由的正常匹配。刷新页面不丢失即使刷新页面，通过query传递的参数也不会丢失，会