Vue

#Vue| 来源: 网络整理| 查看: 265

先有如下场景点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

查看详情 1、第一种方法：拼接方式 methods：{ handleClick(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/detail/${id}`, }) }

对应路由配置：

{ path: '/detail/:id', name: 'detail', component: detail }

获取参数方式：

this.$route.params.id

这种方式传参，页面刷新数据不会丢失。

2、第二种方法：params传参

通过路由属性中的name来确定匹配的路由，通过params来传递参数。

methods：{ handleClick(id) { this.$router.push({ name: 'detail', // 根据name确定匹配路由 params: { id: id } }) }//或者采用router-link前往Detail页面

对应路由配置：

{ path: '/detail/:id', name: 'detail', component: detail }

获取参数方式：

this.$route.params.id 需要注意的是，params动态路由传参，一定要在路由中定义参数，然后在路由跳转的时候必须要加上参数，否则就是空白页面。例如， // 定义的路由中，只定义一个id参数 { path: 'detail/:id', name: 'detail', components: detail } // template中的路由传参， // 传了一个id参数和一个token参数 // id是在路由中已经定义的参数，而token没有定义前往Detail页面 // 在详情页接收 created () { // 以下都可以正常获取到 // 但是页面刷新后，id依然可以获取，而token此时就不存在了 const id = this.$route.params.id; const token = this.$route.params.token; }

三、第三种方法：query传参

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

methods：{ handleClick(id) { this.$router.push({ path: '/detail', query: { id: id } }) }

对应路由配置：

{ path: '/detail', name: 'detail', component: detail }

获取参数：

this.$route.query.id

四、总结：params和query中的区别

1、接收方式

query传参：this.$route.query.id

params传参：this.$route.params.id

2、路由展现方式

query传参：/detail?id=1&user=123&identity=1&更多参数

params传参：/detail/123

【本文地址】

Vue

Vue

今日新闻

推荐新闻