列表进入详情页面传参的两种方式总结 query params

在开发中，我们往往遇到需要跳转页面传参来传递数据，比如列表传递参数到详情页面；详情页面的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;
}