在使用params传参数的时候，路由表没有配置动态路由的话，params传参刷新页面会导致参数丢失。

<!-- more -->

通过params方式传参

配置路由

通过$route.push的path携带参数方式 (路由配置中指定参数)

// 路由配置
{ 
   path: '/detail/:id',  //若id后面加?代表这个参数是可选的，即使不传id也不会导致页面无法访问
   name: 'detail', 
   component: Detail 
}

// 列表中跳转
this.$router.push({
   path:`/detail/${id}` 
})

// 详情页获取参数
this.$route.params.id

注意：这种方式参数是以/id跟在url后，刷新页面后参数不会丢失。

未配置路由

通过$router.push的params传参 (路由配置中未指定参数)

// 列表中跳转
this.$router.push({
   name:'detail',
   params:{
       id:id     
   }
})

// 详情页获取参数
this.$route.params.id

注意：这种方式的传参，必须使用name进行跳转，未在路由配置:id，url后不会显示id，刷新页面后参数会丢失。

通过query方式传参

// 路由配置
{ 
    path: '/detail',
    name: 'detail', 
    component: Detail 
}

// 列表中跳转
this.$router.push({
   path:'/detail',
   query:{
       id:id
   }
})

// 详情页获取参数
this.$route.query.id

注意：这种方式的参数以?id跟在url后，类似get传参。刷新页面后参数不会丢失。