Vue Router传参的基本方式

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来匹配路径。

标签: VUE

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

仅有一条评论

  1. 回复

    朋友 交换链接吗

添加新评论