Vue 路由params传参在刷新之后可能不存在的问题分析

735 阅读2分钟

​最近,在写Vue项目的时候,遇到一个问题:首先我访问详情,然后给详情页面创建匹配路由路由匹配如下:

然后我通过router-link访问:

这没问题,但是,如果我需要在详情页面编辑部分内容(这里我的详情和编辑是同一个页面),然后就有了场景区分,一种是纯详情访问,这种情况下我需要禁用表单的编辑功能,另一种是带有编辑的详情,需要开放表单的编辑。

我们知道,Vue的路由可以通过params和query传参,所以首先我想到的是用路由的params传参,因为我已经传递了id参数,再加一个理所当然吧

进入详情页面之后,也可以拿到type,然后区分场景

但我无意中刷新了下页面,哎,问题来了,我type没了。。。一开始我还没很懵逼,这是什么情况,咋突然不对了,然后我反复试了几次之后,发现刷新之后,没有在路由中匹配的params参数就会丢失,好了们既然找到原因了,哪有什么解决方案呢

前面不是说过,路由传参有两种方式,所以我们可以通过query传递参数

接着,我尝试的刷新,反复刷,没问题。

总结下:Vue页面之间传递参数可以通过路由的params和query传递参数,params的话,参数可以不在URL中出现(如果没在路由中注册的话),弊端是刷新的话,不在URL中出现的参数都会丢失,query就是查询参数,刷新不会丢失,缺点是会在URL中以查询字符串的形式展示,可能不利于敏感数据展示。另外,百度还有另外一种解决方案,通过本地存储的方式(storage、cookie),但本人因场景出现较多,使用此方式会增加额外的工作量,故,并未尝试。