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

第一种：明文传参

（ 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}}