路由的传参方式

第一种方式：铭文传参（ 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'
   }
})

第二种：密文传参（ 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'
  }
})

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

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

劣势：需要一一配置

路由中的配置

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

传参的方式

this.$router.push({
    path: `/InfoDetailed/${data.id}/${data.title}`
})

第四种：vuex 结合 HTML5本地储存

优势：参数不显示，

劣势：微稍有点大材小用（解决第二种传参参数丢失

第五种：新窗口打开

优势：参数不显示，

劣势：微稍有点大材小用（解决第二种传参参数丢失）

HTML跳转

<router-link tag="a" target="_blank" :to="{name:'searchGoods',params:{catId:0},query:{keywords:'手机'}}">热门好货</router-link>

JS跳转

let routeData = this.$router.resolve({
   name: "searchGoods",
   query: params,
   params:{catId:params.catId}
});
window.open(routeData.href, '_blank')