如何详细掌握Vue路由参数传递与获取的多种方法？

本文共计1681个文字，预计阅读时间需要7分钟。

目录+前言

1.通过动态路由参数传递

2.通过query字符串传递

3.props+隐式传递+前言

Vue+页面路由切换时传递参数的方式有以下几种：+ 动态路由参数+它隐藏字段信息，相对而言比较安全，同时+ query字符串+它将参数附加在URL后面，方便记录和分享，但可能不安全+ props+隐式传递

目录

• 前言
• 1. 通过动态路由参数传递
• 2. 通过query字符串传递
• 3. props 隐式传递

前言

vue 页面路由切换时传参的方式有如下几种：

动态路由参数

• 它隐藏字段信息，相对于来说较安全，同时地址栏中的地址也相对较短
• 它必须是先定义后使用，一般用于根据固定参数，返回对应的数据所用

query字符串 ?id=1

通过search字符串的方式来在地址栏中传递数据，相对于来说地址栏会暴露字段信息安全性较低，一般用于搜索相关，它可以不定义就可以直接用

props 隐式传递

隐式传递，它一般用于敏感数据的传递，可以不用

cookie/storage来完成对于页面传参

1. 通过动态路由参数传递

描述：

当我们确定了某一个页面需要根据唯一标识来获取详情的时候，我们一般使用动态路由传递参数。

要注意，通过这种方式传递数据，动态路由必须先定义后使用，并且获取数据时需要唯一标识。