vueRouter query和params区别

 const id = 1111
      // 1. 这种方式可以传参，且刷新数据不丢失 id在路由后面浏览器上可见
      // this.$router.push({
      //   path: '/billing',
      //   query: {
      //     id: 111
      //   }
      // })
      //  2. 这种方式可以传参，且刷新数据不丢失 id的值在路由后面浏览器上可见 在params中取参数
      // 需要在路由中做如下配置
      // {
      // path: '/billing/:id',
      // name: 'Billing',
      // component: () => import('./views/Billing.vue')
      // }

      // this.$router.push({
      //   path: `/billing/${id}`
      // })

      // 3. 这种方式不可以传参， 浏览器上看不到id
      // this.$router.push({
      //   path: '/billing',
      //   params: {
      //     id: 111
      //   }
      // })

      // 4. 这种方式可以传参，但是浏览器上不可见，刷新数据会丢失
      // this.$router.push({
      //   name: 'Billing',
      //   params: {
      //     id: 111
      //   }
      // })
    // 解决刷新数据丢失
    // {
      // path: '/billing/:id',
      // name: 'Billing',
      // component: () => import('./views/Billing.vue')
      // }

      // 5. 这种方式可传参，浏览器上可见，刷新数据不会丢失
     this.$router.push({
        name: 'Billing',
        query: {
          id: 111
        }
      })