路由传参

# 路由传参

# $router和$route的区别

$router：用于操作路由对象

  this.$router.push({
        name:'hello',
        params:{
            name:'word',
            age:'11'
       }
  })

1
2
3
4
5
6
7

$route：用于读取路由对象

  this.name = this.$route.params.name;

# query和params传参的区别

query query传参使用path引入（实测用name引入也可以）

query方式参数会在地址栏看到参数

// 路由配置(仅供参考)
{
    path: "index",
    name: "pdp",
    component: () => import("@/views/pdp/index"),
    meta: { title: "pdp" },
},

// 跳转页面并携带参数
this.$router.push({
    path: 'pdp', // 这里使用name也可以跳转+传参
    query: {
        id:'20220516',
        name: 'update'
    }
})

// 接收参数
this.id = this.$route.query.id;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

params

params传参使用name引入

params方式参数不会在地址栏中展示

params是路由的一部分，必须要在路由后面添加参数名（这样地址栏还是可以看到参数）

// 路由配置(仅供参考)
{
    path: "index/:id/:name,
    name: "pdp",
    component: () => import("@/views/pdp/index"),
    meta: { title: "pdp" },
},

// 跳转页面并携带参数
this.$router.push({
    name: 'pdp', // 这里使用name也可以跳转+传参
    params: {
        id:'20220516',
        name: 'update'
    }
})

// 接收参数
this.id = this.$route.params.id;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 总结

传参可以使用params和query两种方式；
使用params传参只能用name来引入路由，否则页面会是undefined；
使用query传参可以使用name引入路由也可以使用path；
params是路由的一部分，必须要在路由后面添加参数名。query是拼接在URL后面的参数，没有也可以；
query相当于get请求，页面跳转时会在地址栏看到参数；而params相当于post请求，地址栏看不到参数。

# 参考链接

Vue Router 的params和query传参的使用和区别（详尽） (opens new window)

在GitHub上编辑

#vue

上次更新: 5/27/2022, 4:57:31 PM

← vuex的基本使用组件通信之 $attrs 和 $listeners→