vue路由传参及区别

1、用法

A、query要用path来引入,接收参数都是this.$route.query.name。

B、params要用name来引入,接收参数都是this.$route.params.name。

2、效果

A、query类似于ajax中get传参,即在浏览器地址栏中显示参数。

B、params则类似于post,即在浏览器地址栏中不显示参数。

query与params的区别

1.命名路由搭配params,刷新页面参数会丢失
2.查询参数搭配query,刷新页面数据不会丢失
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中。

1.显示在url,params传值是通过 :[参数值] 如path: "/home/game/:num";具体的值就跟在路径后面,如 “/home/game/123”,也就是说传递给子路由的值就是 123;在子路由中,通过 this.$route.params.参数名来接受传递过来的值

2、不显示在url中,如果在PC端将传递的值显示在url中,这样无形中就存在安全隐患,如果客户不小心修改了url那样就会出错,移动端就无所谓了,如何才能不显示在url中,同样很简单,但是需要给映射的路径起一个别名,通过name来取别名