Vue中路由传参方法

第一种方法

通过路由属性中的name来确定匹配的路由，通过params来传递参数。
缺点：刷新页面数据会丢失

methods：{
  getModel(id) {
       this.$router.push({
          name: 'MainWashing',
          params: {
            id: id
          }
        })
  }

对应路由配置:

 {
     path: '/mainWashing',
     name: 'MainWashing',
     component: MainWashing
   }
   

子组件中: 获取参数方法

this.$route.params.id

第二种方法

使用path来匹配路由，然后通过query来传递参数
缺点：这种情况下 query传递的参数会显示在url后面?id=？

methods：{
  getModel(id) {
        this.$router.push({
          path: '/mainWashing',
          query: {
            id: id
          }
        })
  }

对应路由配置：

{
     path: '/mainWashing',
     name: 'MainWashing',
     component: MainWashing
   }

子组件中: 获取参数方法

this.$route.query.id