欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue路由传参的三种方法

程序员文章站 2022-05-18 17:19:10
...
参考文献:https://segmentfault.com/a/1190000012393587

一、直接在路由中写参数

<li v-for="article in articles" @click="getDescribe(article.id)">
 getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
 })
//在router--->index.js进行配置
 {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }
//通过this.$route.prams.id取值

二、通过prams传参

this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
 })
//在router--->index.js进行配置
{
     path: '/describe',
     name: 'Describe',
     component: Describe
}
//通过this.$route.prams.id取值

三、通过query传参

 this.$router.push({
          path: '/describe',
          query: {
            id: id
  }
//在router--->index.js进行配置
{
     path: '/describe',
     name: 'Describe',
     component: Describe
 }
//通过this.$route.query.id取值