在开发中，我们往往遇到需要跳转页面传参来传递数据，比如列表传递参数到详情页面；详情页面的url为：
http://localhost:8080/#/detail?id=1
我们可以看到传递了参数 id=1，在详情页面可以通过 this.$router.query.id 获取，即使刷新当前详情页面，id的值也不会消失；
query 和 params两者之间的区别：
1、query通过path切换路由，params通过name切换路由
<router-link :to="{path:'detail',query:{id:1}}"></router-link>
<router-link :to="{name:'detail',query:{id:1}}"></router-link>
2、query 通过this.router.params 来接收参数值
3、展现形式不一样
query的展现url 是
/detail?id=2&user=123&更多
params+动态路由 展现形式
/detail/123
4、params动态路由传递参数需要注意地方
一定要在路由中定义参数，然后路由跳转的时候一定要加上参数，否则就是空白页面
{
path: 'detail/:id',
name: 'Detail',
components: Detail
}
如果没有在路由中定义参数，也是可以传过去的，同时也能接收到，但是一旦刷新页面，这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的，因为你总不可能要求用户不能刷新页面吧。例如：
// 定义的路由中，只定义一个id参数
{
path: 'detail/:id',
name: 'Detail',
components: Detail
}
// template中的路由传参，
// 传了一个id参数和一个token参数
// id是在路由中已经定义的参数，而token没有定义
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail页面</router-link>
// 在详情页接收
created () {
// 以下都可以正常获取到
// 但是页面刷新后，id依然可以获取，而token此时就不存在了
const id = this.$route.params.id;
const token = this.$route.params.token;
}
