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

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

作者: 却忘不掉你心言 | 来源:发表于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