Vue Router传参基本上是必备知识点，总结一下。

<li v-for="article in articles" :key="article.id" @click="getDescribe(article.id)">

方案一：

getDescribe(id) {
  this.$router.push({
    path: `/describe/${id}`,
  })
}
//或者
getDescribe(id) {
  this.$router.push({
    name: 'Describe',
    params: {
      id: id
    }
  })
}

对应路由配置：

{
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
}

注意：如果路由这里不进行配置，id会在页面刷新的时候消失。

获取参数：

this.$route.params.id

方案二：

getDescribe(id) {
  this.$router.push({
    name: 'Describe',
    query: {
      id: id
    }
  })
}

这里路由就不用再单独配置了。

获取参数：

this.$route.query.id

唠叨一下，这两种方案都可以实现路由传参，但是也有一些区别，需要自行斟酌。

方案一必须要在路由里面提前把参数配置好，如果不配置好的话，页面的URL地址就不会带上参数，页面刷新参数就丢失了。为什么参数会消失呢，可以这么理解，页面跳转的时候携带了参数，但是如果已经在跳转后的页面了，刷新页面，这里并没有携带参数，所以就会消失。

方案二虽然不用再去路由里面配置参数，但是他的链接不是特别的好看。

最后，push里面demo里面用的是name，也可以用path来匹配路径。