美文网首页
列表进入详情页的传参问题。

列表进入详情页的传参问题。

作者: 却忘不掉你心言 | 来源:发表于2018-07-08 14:41 被阅读0次

例如商品列表页面前往商品详情页面,需要传一个商品id;

c页面的路径为http://localhost:8080/#/detail?id=1,可以看到传了一个参数id=1,并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据,获取id的方式是 this.$route.query.id

vue传参方式有:query、params+动态路由传参。

说下两者的区别:

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

 2.query通过this.$route.query来接收参数,params通过this.$route.params来接收参数。

3.query传参的url展现方式:/detail?id=1&user=123&identity=1&更多参数

       params+动态路由的url方式:/detail/123

    4.params动态路由传参,一定要在路由中定义参数,然后在路由跳转的时候必须要加上参数,否则就是空白页面:

注意,params传参时,如果没有在路由中定义参数,也是可以传过去的,同时也能接收到,但是一旦刷新页面,这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的,因为你总不可能要求用户不能刷新页面吧。 例如:

相关文章

网友评论

      本文标题:列表进入详情页的传参问题。

      本文链接:https://www.haomeiwen.com/subject/fzjouftx.html