vue路由器参数页面刷新或回退参数消失的解决方案

写在前面：

传递参数是前端经常需要用到的操作，很多场景都需要用到上一页的参数。本文将详细介绍vue路由器如何传递参数和一些小细节。有需要的朋友可以参考，喜欢的可以点赞或者关注，希望对大家有所帮助。

Vue路由器是如何传递参数的

什么是参数和查询？

Params:/router1/: id，/router1/123，/router1/789，其中id称为Params

查询：/router1？id=123，/router1？Id=456，其中Id称为query。

路由接口：

router.js:

路由设置在这里，使用params方法传递参数时，要在路由后面加上参数名称，传递参数时，参数名称要与路由后面设置的参数名称相对应。使用查询方法，没有这样的限制，可以直接在跳转中使用。

注意：如果路由上没有写参数，可以传递，但是url上不会显示你的参数，跳转到另一个页面或者刷新页面时参数会丢失(如下图所示)，那么依赖这个参数的http请求或者其他操作都会失败。

注意上面的路由参数。我们在路由上设置了参数id，但是我没有在路由上设置id2，所以刷新后id2就消失了。在项目中，我们不能要求用户不刷新。

构成部分1:

Template div class=' app _ page从该路由引用到另一条路由/h1 router-link : to=' { name : ' router 1 '，params: {id3360status，id2:status3 }，query : { queryid 3360 status 2 } } '路由器-link跳转到router 1/router-link/div/templatescriptexportdefault { name : ' app _ page '，Data(){ return { status 33600 }

上述路由器链接也可以使用路由器文档中的编程导航来跳转参数。

这个。$ router . push({ name : ' router 1 '，params: { id:状态，id2:状态3}，query: { queryId:状态2 } })；//编程跳转写在一个函数中，通过点击等方法触发这两种参数传递的效果完全一样。编程导航可以进行判断跳转，比如是否授权，是否登录等等。对此不太了解的小伙伴可以跳过这个编程导航，稍后再看。

构成部分2:

用于接收参数的模板div class=' Router 1 ' h1 route/h1 params . id:{ $ route . params } }/h1 query . status 3360 { { $ route . query . queryid } }/h1 keep-alive Router-view/Router-view/keep-alive/div/template还是比较简单的，使用上面的组件就可以成功传递。

提示：获取路线上面的参数，使用$route，后面没有r。

params和query有什么区别？

1.参数是路由的一部分，必须存在。查询是url后拼接的参数，不存在也没关系。

一旦在路线中设置了参数，参数就是路线的一部分。如果此路由有params参数，但在跳转过程中没有传递此参数，将导致跳转失败或页面没有内容。

示例：跳转/路由器1/:id

router-link : to=' { name : ' router 1 '，Params 3360 { id 3360 status } } '正确/router-link router-link : to=' { name 3360 ' router 1 '，Params: { id2: status } } '错误/router-link2，params和查询可以作为参数传递，但是当params未设置时，页面将被刷新或返回参数将丢失，这种情况不会发生

作者原话：首先，我想到的刷新参数消失的方法是一开始把参数保存在localStorage，但是如果这样的参数多了，可能会多一点存储的地方；

然后我在看一些博客的时候提到了使用vue的keep-alive，也就是在router-view封套上的keep-alive来实现页面缓存，但是这真的意味着每一个页面都需要缓存吗，尤其是在一些状态之间切换需要一个过程来改变页面的状态，而写这个并不能实现数据的实时刷新

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。