start

写在前面：

传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。复制代码

先说下路由传参的几种方式吧？

传参方式1

采用query传参方式, eg:复制代码

注意: 这种传参方式虽然在地址参数是明文的,可以通过encodeURI/decodeURI和encodeURIComponent/decodeURIComponent等方法对蚕食进行转码和解码,该方法可以自行百度使用.使用path和query这种传参的方式不会出现刷新页面后者后退页面,参数丢失的情况.

传参方式2

采用params传参方式, eg:复制代码

注意: 这种传参方式参数是不会显示url地址栏里面,但是问题就是当刷新页面的时候或者回退页面的时候出现参数丢失的情况,params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况，这一点的在上面说过了.

eg_1:复制代码

eg_2:

接下来我们一起看看接受参数的方法

注意! 注意! 注意! 重要的事说三遍, 接受参数时,这里是router, 然后params对应通过params接受,query通过query接受.

end