vue路由跳转携带参数时query和params的区别

vue携带参数传参的方法可以参考以下文章
vue路由跳转和传参的方式
现在我们以

this.$router.push({name: 'index', params: {id: '1'}})
this.$router.push({name: 'index', query: {id: '1'}})

来举例说明query和params的区别：
vue路由传参共有两种方法，分别是通过params传参和通过query传参，两者区别如下：
1.用params传参的时候
页面跳转之后的页面路径为http://localhost:8080/#/index
这种传参方法：
1.用户看不到具体的参数值，相对安全
2.当页面刷新的时候传递的参数id在该页面中就不存在了。
3.params传参的时候，只能用name引入路由，不能使用path引入
2.用query传参的时候
页面跳转之后的页面路径http://localhost:8080/#/index?id=1
这种传参方法：
1.传递的参数值会暴露在页面路径中，不安全
2.当页面刷新的时候，传递的参数不会消失
3.query传参的时候，可以同时使用name和path引入路由