vue 路由传参中刷新页面参数丢失 及传参的几种方式？

在页面跳转中，我通过路由传参，结果发现页面参数丢失了。路径返回了根目录。。。。

1. 先说下路由传参的几种方式吧？

比如：

传参方式1：

         1) get:function(id){                      
                        this.$router.push({
                               path: `/describe/${id}`,
                        })
                }


        2) 相应路由配置：{
                                     path: '/describe/:id',
                                     name: 'Describe',
                                     component: Describe
                                   }

         3) 子组件取 this.$route.params.id ;

传参方式2：

          1）父组件通过name来匹配
                this.$router.push({
                      name: 'Describe',
                      params: {
                                   id: id
                      }
             })

         2)相应路由配置：
                 {
                      path: '/describe/:id',
                      name: 'Describe',
                      component: Describe
                  }
         3)子组件是通过：
                 this.$route.params.id

注意：此方式2有一个小坑，以前用params 时感觉很方便，就用了方式2。

      坑一：子组件第一次没有获取到值，原来我是用path路径，而没有用name。我把它改掉了。
      坑二：改掉后发现刷新参数不见了。。。。。。。。。。。根据网上大神的建议，再路由配置中加了path: '/describe/:id',  相当于混合了第一种方式； 但是。。。。。。。。
      坑三：由于根路径是登陆页，每次返回，并不是返回上一页，而是直接返回了根路径登陆页（我在路由配置中加了好多参数，导致describe丢失），这就有点烦了，本来你把主页设为 /也可以，但是并不是我一开始想要的结果，

  哈哈。。。方案三解决了上述所有的问题；

传参方式3：

     父组件：this.$router.push({
                        path: '/describe',
                        query: {
                                      id: id
                        }
                    })

    路由设置：
                    {
                         path: '/describe',
                         name: 'Describe',
                         component: Describe
                     }

     子组件获取：
                   
             this. $route.query.id

注意所有的子组件获取是$route，而不是$router ,哈哈，很开心完美解决了路由传参

posted @ 2018-06-04 10:39 Panax 阅读( ...) 评论( ...) 编辑 收藏