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

在开发中,我们往往遇到需要跳转页面传参来传递数据,比如列表传递参数到详情页面;详情页面的url为:

http://localhost:8080/#/detail?id=1

我们可以看到传递了参数 id=1,在详情页面可以通过 this.$router.query.id 获取,即使刷新当前详情页面,id的值也不会消失;
query 和 params两者之间的区别:

1、query通过path切换路由,params通过name切换路由




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没有定义
前往Detail页面
 
// 在详情页接收
created () {
    // 以下都可以正常获取到
    // 但是页面刷新后,id依然可以获取,而token此时就不存在了
    const id = this.$route.params.id;
    const token = this.$route.params.token;
}

你可能感兴趣的:(列表进入详情页面传参的两种方式总结 query params)