VUE常见3种传递参数以及接收参数方法

最新推荐文章于 2024-09-26 11:12:57 发布

Jave2108

最新推荐文章于 2024-09-26 11:12:57 发布

阅读量5k

点赞数 1

分类专栏： VUE 文章标签： html javascript vue.js

本文链接：https://blog.csdn.net/JaveWong/article/details/120616940

版权

VUE 专栏收录该内容

21 篇文章 4 订阅

订阅专栏

第一种：明文传参

（ URL路径会显示传递的参数）

优势：页面刷新参数不会丢失，劣势：参数公开

// HTML：跳转
<router-link :to="{name:xxx,query:{page:1,code:8899}}"></router-link>

// JS跳转
this.$router.push({
  name: `xxx`,
  query: {
    page: '1', code: '8989'
  }
})

// 接收：this.$route.query.xxxxxx

第二种：密文传参

（ URL路径不会显示传递的参数）

优势：参数不显示，劣势：页面刷新参数消失

// HTML：跳转
<router-link :to="{name:xxx,params:{page:1,code:8899}}"></router-link>

// JS跳转
this.$router.push({
  name: `xxx`,
  params: {
    page: '1', code: '8989'
  }
})

// 接收： this.$route.params.page

第三种：冒号的的形式传递传参

优势：页面刷新参数不会丢失，劣势：需要一一配置

{
  path: "/infoDetailed/:newsId/:newsTitle",
  name: "InfoDetailed”
  meta: {
    name: "信息详情"
},
  component: () => import("../views/Info/category.vue")
}

// 传参数方式：
root.$router.push({
    path: `/InfoDetailed/${data.id}/${data.title}`
})

// 接收方式：
{{ $route.params.newsId
{{ $route.params.newsTitle}}