vue中路由传参的三种方式

男娘i 2022-08-29 00:11 323阅读 0赞

第一种，第三种方法页面刷新数据不会丢失; 第二种方法页面刷新数据会丢失;

方式跳转方式对应路由获取参数方式

第一种

方式	跳转方式	对应路由	获取参数方式
第一种	`//直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: /particulars/${id}, })`	`{ path: ‘/particulars/:id’, name: ‘particulars’, component: particulars }`	`this.$route.params.id`
第二种	`this.$router.push({ name: ‘particulars’, params: { id: id } })`	`{ path: ‘/particulars’, name: ‘particulars’, component: particulars }`	`this.$route.params.id`
第三种	`this.$router.push({ path: ‘/particulars’, query: { id: id } })`	`{ path: ‘/particulars’, name: ‘particulars’, component: particulars }`	`this.$route.query.id`

//直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: /particulars/${id},
        })

{
  path: ‘/particulars/:id’,
  name: ‘particulars’,
  component: particulars
}

this.$route.params.id

第二种

this.$router.push({
          name: ‘particulars’,
          params: {
            id: id
          }
        })

{
     path: ‘/particulars’,
     name: ‘particulars’,
     component: particulars
   }

this.$route.params.id

第三种

this.$router.push({
          path: ‘/particulars’,
          query: {
            id: id
          }
        })

{
     path: ‘/particulars’,
     name: ‘particulars’,
     component: particulars
   }

this.$route.query.id

组件中获取参数的时候是 route.params 这很重要~~~

表情：

评论列表（有 0 条评论，323人围观）

还没有评论，来说两句吧...