vue使用params路由传参出现undefined

最新推荐文章于 2023-11-13 17:55:41 发布
最新推荐文章于 2023-11-13 17:55:41 发布
阅读量6.3k 收藏 2
点赞数 1
分类专栏： vue+element-ui 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luxurie/article/details/104923899
版权

params路由传参出现undefined的解决办法

router.js：
关键要写name

{ name: 'search', path: '/search', component: Search },

发送参数的组件中：
（query传参时用 path 定位，而这里用 name ）

this.$router.push({ name: 'search',
					params: { queryString: this.gQueryString }
				})

接收参数的组件中：

this.queryString = this.$route.params.queryString

补充：params传参页面刷新后失效；而query不会失效，参数被拼接在url中
解决~

Nuygnix~
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue动态路由配置及路由传参的方式
12-10
动态路由： 　　当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个”共用”的组件，并且还要传参数，渲染不同的数据 　　这就要用到动态路由跟路由传参了！ 首先我们来了解下router-link这个组件： 　　简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以渲染不同的标签，可以浏览器端查看到 　　并且当一个导航器被激活的时候，会自动加上一个css的激活样式，可以全局在路由配置中设置linkActiveClass属性，属性名就是样式css名，一般写为active
vue路由传参 vue路由传参
11-18
vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参
vue3.0路由跳转useRouter执行后undefined问题-踩坑笔记
热门推荐
Leslie_hxd的博客
10-14 1万+
方法一 注意：useRouter执行一定要放在setup方法内的顶部，不能放在下面toPage函数里面执行，否则是undefined import { useRouter } from 'vue-router'; export default { setup() { // 第一步将useRouter函数执行放在顶部 const router = useRouter(); // 第二步在方法里面调用router function toPage(){ rout.
vue-router $router.push.params 传值 跳转页面后 获取params的值为 undefined
qq_34841115的博客
04-16 1万+
问题：跳到goods页面后，$route.params 为undefined解决： 将push 里的path 改成name就可以了跳转到goods页面后就可以获取到params.sVal的值了。
vue3.x路由跳转useRouter执行后undefined问题 setup
听雨少年的博客
02-12 3445
useRouter执行一定要放在setup方法内的顶部或者其他位置，不能放在下面setup的函数里面执行(方法内定义的其他函数)，否则作用域改变useRouter执行是undefined。 import { useRouter } from 'vue-router'; // 1. 获取 router const router = useRouter(); // 2. 调用router 的方法 function toPage(){ router.push("/about"
vue 跳转页面传参的时候参数值为undefined的解决方法
梁同学与Android
10-04 8885
错误代码如下： 跳转之前的页面： clickScan(index,row) { this.$router.push({ path: '/biz/AssociationAcitvityEnroll', params: { associationId: row.associationId } }) }, 跳转之后的页面 mounted: function () { this.associationId = this.$route.params.a
vue路由this.$router.push跳转传参时，页面刷新会出现undefined的问题
qq_40685439的博客
03-26 6055
一般来说。利用this.$router.push进行页面跳转时，如果传递的参数为对象（图片中data为对象）时，不能直接传，而是需要把对象经过JSON.stringify转为字符串，取数据的时候需要用JSON.parse解析出来，刷新的时候才不会出现undefined。 注意： 1、经过测试，此方法只对以query形式传参时才会起效果，params不行。 2、params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’, 否则拿到的数据是undefined。因为params只.
记录--关于vue-router4+TS传参使用params undefined问题
weixin_41611635的博客
07-25 1935
记录--关于vue-router4+TS传参使用params undefined问题
vue中props传递异步数据(子组件中接收到的对象为undefined)
Granse的博客
04-01 2741
vue中props传递异步数据(子组件中接收到的对象为undefined)
vue传参的基本方式
weixin_45178761的博客
09-01 254
1：方案一 getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, }) // 方案一，需要对应路由配置如下： { path: '/describe/:id', name: 'Describ...
vue params、query传参使用详解
08-29
Vue 参数传递详解 在 Vue 中，参数传递是一...Vue 中的参数传递方式有多种，包括 params 传参、query 传参和使用 `router-link` 组件传参。不同的传递方式适用于不同的场景，我们可以根据实际情况选择合适的传递方式。
vue-router 路由传参用法实例分析
10-15
本篇文章将深入探讨 Vue Router 的路由传参方法。 首先，路由传参主要分为两种方式：查询参数和命名参数。 1. **查询参数**： 查询参数是在 URL 查询字符串中传递的，以 `?` 开头，例如 `/list?id=001`。这种方式...
浅谈vue-router 路由传参的方法
08-28
在 vue-router 中，我们可以使用 `$route.params` 来获取路由参数。例如，在新闻详细页中，我们可以使用 `$route.params.id` 来获取新闻 ID。 ```html 新闻详细页面 <span>{{$route.params.id}} ``` ### 2. ...
详解Vue中一种简易路由传参办法
08-29
Vue 中简易路由传参方法详解 本文主要介绍了 Vue 中一种简易路由传参方法，以解决在路由跳转时传递参数的问题。 知识点1: 路由传参的需求 在实际开发中，我们经常遇到需要在路由跳转时传递参数的需求，例如在 A ...
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
this和this.$router这个方法在setup()里使用竟然是undefined----使用composition-api踩到的坑总结篇
qq_33653393的博客
05-25 1657
vue的版本是2，使用插件composition-api尝试组合式api 1. this和this.$router这个方法在setup()里直接使用竟然是undefined 我是这么写的 setup() { console.log(this)//undefined console.log(this.$router)//error } 控制台告诉我显然有问题，但是我在另一个完成的vue页面里在setup()的方法里使用了this.$router，发现可以正常使用 setup() {
【Nuxt】Nuxt3 控制台警告 [Vue Router warn]: No match found for location with path “/undefined“
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-13 1044
非常坑的一个问题，如果你组件没有传值，就会导致使用这个组件的页面报这个警告，真的太难发现了，找了好久！
this.$router.push传递参数失败undefined
111
05-23 480
出现问题，线下地址可以实现，线上刷新页面之后会报错，找不到this.$route.params.id。vue使用的是params传参，其path路径中要带着“/xxx/:id”path配置没有写id，第一次可请求，刷新页面id会消失。
vue3.x中useRouter()执行后返回值是undefined问题
weixin_43422861的博客
12-06 8346
useRouter
vue 路由 params参数 传参怎么用
05-04
在 Vue 路由中，可以使用 `params` 传递参数，具体步骤如下： 1. 在路由定义时，使用 `:` 表示该位置是动态参数，如下所示： ```javascript { path: '/user/:id', component: User } ``` 2. 在组件中，通过 `$route.params` 来获取路由参数，如下所示： ```javascript export default { name: 'User', mounted() { console.log(this.$route.params.id) } } ``` 在上面的例子中，当访问 `/user/123` 时，控制台将输出 `123`。 同时，也可以在组件内监听 `$route` 对象的变化，以便在参数发生变化时执行一些操作，如下所示： ```javascript export default { name: 'User', watch: { '$route' (to, from) { // to.params 和 from.params 都可以获取到路由参数 console.log(to.params.id) } } } ``` 这样，每当路由参数发生变化时，就可以在控制台中打印出新的参数值了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值