vue路由传参

Vue路由传参

1. 查询字符串

   this.$router.push({`path:/menu/edit/${id}`})
   
   // 路由配置
    {
     path: '/menu/edit/:id',
     component: Edit
    }
   
   // 子组件使用获取使用的参数值
   
   this.$route.params.id
   

2. query

   this.$router.push({
       path: '/menu/edit',
       query: {
           id: id
       }
   })
   
    {
     path: '/menu/edit',
     component: Edit
    }
   
   this.$route.query.id
   

   3. params

   this.$router.push({
       name: '/menu/edit',
       params: {
           id: id
       }
   })
    
   // 注 ： params传参，必须加name。
    {
     path: '/menu/edit',
     name: '/menu/edit'
     component: Edit
    }
   

   总结：

   
   查询字符串 与 query传参页面数据不会消失， 而params传参数据会消失。
   
   这是因为， 查询字符串 与 query传参 在传参时将参数携带过去了，而params的参数保存在缓存，因此页面刷新数据会消失。