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

2018-07-08  本文已影响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传参时,如果没有在路由中定义参数,也是可以传过去的,同时也能接收到,但是一旦刷新页面,这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的,因为你总不可能要求用户不能刷新页面吧。 例如:

上一篇 下一篇

猜你喜欢

热点阅读