前端搬砖之回顾与总结：vue路由传参的方式

Posted 2020-12-23 momozjm

前言

从17年毕业一直到现在都在前端搬砖，从小的外包公司到中大型的互联网公司都留下过搬砖的足迹。从业这三年，不管是jquery、react、vue、还是小程序啥的的项目都弄过，项目弄的虽然多了，但是却很杂，也没有一个一直维护并深入优化的项目。为了不让自己做过的项目随时间遗忘下去，特地将项目中遇到的问题或者知识记录在此，达到巩固的作用。

如果其中有一些错误，也恳请发现问题的朋友可以在评论区留下您的建议。

有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。

路由传递参数

一、路径传参

路径传参：

// 路由配置
{
    path: ‘/somePage/:id‘,
    name: ‘somePage‘,
    component: () => import(‘somePage‘)
}
  
// 跳转前传参
const id = 1;
this.$router.push({
    path: `/somePage/${id}`
});

// 接收参数
created() {
    console.log(this.$route.params.id); // "1"
}

路径传参传递多个参数

// 路由配置
{
    path: ‘/somePage/:id/:name‘,
    name: ‘somePage‘,
    component: () => import(‘somePage‘)
}
  
// 跳转前传参
const id = 1;
const name = ‘冲爷nb‘
this.$router.push({
    path: `/somePage/${id}/${name}`
});

// 接收参数
created() {
    console.log(this.$route.params); // {id: "1", name: "冲爷nb"}
}

路径传参打乱参数位置

// 路由配置
{
    path: ‘/somePage/:id/path/:name‘,
    name: ‘somePage‘,
    component: () => import(‘somePage‘)
}
  
// 跳转前传参
const id = 1;
const name = ‘冲爷nb‘
this.$router.push({
    path: `/somePage/${id}/path/${name}`
});

// 接收参数
created() {
    console.log(this.$route.params); // {id: "1", name: "冲爷nb"}
}

---

name+params传递参数

通过路由属性中的name来确定匹配的路由，通过params来传递参数。这种情况下,参数不会显示在地址栏后面

// 路由配置
{
    path: ‘/somePage‘,
    name: ‘somePage‘,
    component: () => import(‘somePage‘)
}
  
// 跳转前传参
const id = 1;
const name = "冲哥nb";
this.$router.push({
    name: "somePage",
    params: {
        id,
        name
    }
});

// 接收参数
created() {
    console.log(this.$route.params); // {id: "1", name: "冲爷nb"}
}

---

path+query传递参数

使用path来匹配路由，然后通过query来传递参数。这种情况下 query传递的参数会显示在url后面

// 路由配置
{
    path: ‘/somePage‘,
    name: ‘somePage‘,
    component: () => import(‘somePage‘)
}
  
// 跳转前传参
const id = 1;
const name = "冲哥nb";
this.$router.push({
    path: "/somePage",
    query: {
        id,
        name
    }
});

// 接收参数
created() {
    console.log(this.$route.params); // {id: "1", name: "冲爷nb"}
}

---

优缺点总结:

• 路径传参：可传递多个参数，参数显示在url中，页面刷新参数还可获取。
• name+parmas：可传递多个参数，参数不会显示在url中，页面刷新参数不可获取。
• path+query：可传递多个参数，参数显示在url中，页面刷新参数还可获取。

上图：