vue-router中params对象形式传参问题

已于 2022-02-12 10:49:23 修改
阅读量2.9k 收藏
点赞数 3
文章标签： vue.js javascript 前端
于 2021-12-07 15:51:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56704277/article/details/121771028
版权
本文详细介绍了在Vue.js中使用`this.$router.push`进行路由跳转时，如何正确处理params参数。首先强调了在使用name属性进行跳转时，params是必需的，并且参数值为空时可能导致URL问题。接着，通过示例展示了当params可传可不传的情况，并提供了在参数为空时使用undefined来避免URL异常的解决方案。
摘要由CSDN通过智能技术生成

1.params跳转传递参数

params跳转中必须使用name不使用path（name需要在路由中配置）

this.$router.push({

name:'search',

params:{

id:123

}

})

2.路由中path占位问题

params必传

这种形式必须传params参数，不传的话url会出现问题。

url问题

解决：

params可传可不传

这中形式表示params参数可传可不传。

3.params参数为空

问题：参数为空url会出现问题

解决：

this.$router.push({

name:'search',

params:{

k:' '||undefined             //使用undefined解决

}

})

唯爱编程
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
浅析vue-router jquery和params传参(接收参数)$router $route的区别
10-18
- 重要的是要注意，在使用params传参时，`push`方法中只能使用`name`属性来指定路由，而不能使用`path`属性。因为`params`参数是和路由名称(name)绑定的，而不是路径(path)。 - query参数通过URL的查询字符串传递，...
详解vue嵌套路由-params传递参数
08-30
本篇文章主要介绍了详解vue嵌套路由-params传递参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue路由传参 params传参不能传对象
weixin_43742121的博客
10-30 3912
不能传对象，传对象的时候，刷新完数据会丢失 传递的是一个对象 但是： 跳转以后，刷新页面，数据会丢失，所以说不能传对象，会有问题
Vue3【二十三】Vue 路由模式 用params给组件传参
最新发布
Ggome的博客
06-13 1315
Vue3【二十三】Vue 路由模式 用params给组件传参只能使用名称路由需要在路由中提前指定参数占位？代表可选项。
vue-router中query与params区别
aoxi9939的博客
03-02 272
query和params两者都是在Vue路由中传参。 用法： query用path来引入，params只能用name来传递，不能使用path 展示效果：query更像ajax中get请求（会在地址栏显示参数），而params更像post方式传递（不会在地址栏显示参数） query方式传参和接收参数 //传参 this.$router.push({ ...
query/params传参如何传一个对象
qq_44130891的博客
06-16 955
query/params传参如何传一个对象
vue传参方式
F318706的博客
09-15 599
传 this.$router.push(`/about/${item.name}/${item.grades}`);query传对象的时候一定要先JSON.stringify("参数") 获取的时候 JSON.parse("参数")动态路由传多个参数 path: '/about/:user/:grades', 就需要拼接。传参对象的时候不需要转为字符串 但是第一次进来的时候可以拿到参数,刷新会丢失。query传参在地址栏上是可见的,问号后面就是我们的参数。(2)params传参。
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于vue-router 多级路由redirect 重定向的问题
10-18
如果直接在 <router-link> 标签中传参存在问题，可以使用编程式导航，即通过 this.$router.push 方法来跳转页面，并传递参数。 例如： ```javascript // 在导航按钮上绑定点击事件 <router-link :to="{ name: '...
详解vue-router传参的两种方式
01-19
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。...vue-router传参两种方式：params和query params、query是什么？  params：/router1/:id ，/router1/1
浅谈vue-router 路由传参的方法
08-28
const router = new VueRouter({ routes: [ { path: '/news/:id', component: NewsDetail }, ], }); ``` ### 3. 使用 `<router-link>` 组件来传递参数 在 vue-router 中，我们可以使用 `<router-link>` 组件来...
动态路由传参，组件 接收 传递过来的数据 的多种实现方式（$route.params 、props 、props设置为对象）
weixin_72303943的博客
06-05 1387
动态路由传参，组件 接收 传递过来的数据 的多种实现方式（$route.params 、props 、props设置为对象）
Vue路由的params传参,query传参，以及传递props的写法
weixin_46389390的博客
04-14 3938
params传参 路由的params传参需要设置占位符，如给search组件通过params传递keyword值 路由配置信息 { name: "search", path: "/search/:keyword", component: Search, }, 传递的方法有三种 第一种：直接传递字符串 使用编程式路由导航的写法 methods:{ goSearch() { this.$router.push("/search/" + this.k
路由中的meta、params传参的一些问题（可传不可传，为空，搭配，点击传递多次参数报错）
m0_60376759的博客
08-01 2457
实现props(route)=>({keyword1route.params.keyword,keyword2route.query.keyword})解决2处理失败的promise在push调用之后加.catch(()=>{})不好，每次都要加，烦。如果指定name与params配置,但params中数据是一个"",无法跳转，路径会出问题。指定params参数时可不可以用path和params配置的组合?不可以用path和params配置的组合,......
前端知识点----params参数可传可不传？传的值为空？
qq_44973583的博客
11-04 1198
params传参部分
axios请求的params参数值中有对象的传递处理
小楼秋风
03-29 2174
1.按照qs npm install qs 2.引入qs import qs from 'qs' // post方法的params方式传递对象 axios({ url: '接口', method: 'post', params: data,//传递的对象{aa:{bb:11,cc:22},dd:33} -> api?aa.bb=11&aa.cc=22&dd=33 paramsSerializer: function(params) { return qs.
Vue params和data传参的介绍
雨声学java
05-09 1473
一、 params params使用条件： 1、get形式的传参 2、传的是一个对象 结果： 它会把你参数的内容 最后分散到你地址栏后面的问号 http://localhost:8888/user/list/1?name=liming getChapterVideoByCourseId2(courseObject) { return request({ url: `/eduservice/chapter/getChapterVideo/`, meth.
vue-router动态路由之params、query传参
qq_39025142的博客
11-23 658
动态路由：把 hash 地址中可变部分定义为参数项，从而提高路由规则的复用性。以下是动态路由的两种传参方式。 1. 第一种传参方式 路由规则 :id 为自定义名 { path : "/movie/:id", component : Movie } 跳转链接 <router-link to="/movie/1"> 电影1 </router-link> <router-link to="/movie/2"> 电影2 </router-link> &l
vue-router 的params query传参
04-01
在使用 Vue.js 进行前端开发时，经常需要进行页面的跳转和参数的传递。Vue.js 提供了一个官方的路由插件 vue-router，可以方便地进行页面的跳转和参数的传递。 vue-router 支持两种方式进行参数传递：params 和 query。 params 传参： params 是路由路径中的占位符，可以通过 $route.params 来获取传递的参数。使用 params 传参时，需要在定义路由规则时使用冒号将参数名包裹起来，例如： ```javascript const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) ``` 在上面的例子中，定义了一个 /user/:id 的路由规则，其中 :id 是一个占位符，可以接受任意的参数。 在组件中访问传递的参数时，可以通过 $route.params.id 来获取： ```javascript const User = { template: '<div>User {{ $route.params.id }}</div>' } ``` 在使用 params 传参时需要注意，如果在同一个路由规则下，参数发生变化时不会触发组件的生命周期钩子函数，需要通过 watch 监听 $route 对象来实现： ```javascript const User = { template: '<div>User {{ id }}</div>', watch: { '$route.params.id' (to, from) { this.id = to } }, data () { return { id: '' } } } ``` query 传参： query 是通过 URL 的查询字符串传递参数，可以通过 $route.query 来获取传递的参数。使用 query 传参时，需要在定义路由规则时使用问号将参数名包裹起来，例如： ```javascript const router = new VueRouter({ routes: [ { path: '/user', component: User } ] }) ``` 在组件中访问传递的参数时，可以通过 $route.query.id 来获取： ```javascript const User = { template: '<div>User {{ $route.query.id }}</div>' } ``` 在使用 query 传参时需要注意，参数的值会被转换为字符串类型，如果需要传递数组或对象等复杂数据类型，需要将其转换为 JSON 字符串。在组件中获取参数时需要使用 JSON.parse 解析字符串。例如： ```javascript // 在路由中传递数组参数 router.push({ path: '/user', query: { ids: JSON.stringify([1, 2, 3]) } }) // 在组件中获取数组参数 const User = { template: '<div>User {{ ids }}</div>', computed: { ids () { return JSON.parse(this.$route.query.ids) } } } ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值