(转)一个vue路由参数传递的注意点

首先我的路由的定义

{path: '/b',name: 'B',component: resolve => require(['../pages/B.vue'], resolve)
}

我从A组件跳转到B组件，并通过路由信息对象传递一些参数

this.$router.push({path: '/b',params: {paramA: 'a'      },query:{paramB: 'b'}
})

在B组件中获取参数

this.$route.query.paramB         //b
this.$route.params.paramA        //undefined

通过路由的params对象传递过来的参数paramB始终是undefined，始终找不到原因。

通过查阅文档，终于找到原因，那是因为路由的params对象使用，必须要通过路由名来调用路由，而不同通过path来调用，而query对象则没有这个要求。所以我们修改下代码：

this.$router.push({name: 'B',params: {paramA: 'a'      },query:{paramB: 'b'}
})

将path参数换成对应的路由名称就可以了，这个时候获取参数就一切正常了。

this.$route.query.paramB         //b
this.$route.params.paramA        //a

作者：西门小妖
链接：https://juejin.im/post/5a28a5bdf265da4311201909
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

转载于:https://www.cnblogs.com/lsy0403/p/8665034.html

(转)一个vue路由参数传递的注意点相关推荐

Vue 路由参数传递
文章目录路由的query参数命名路由路由的params参数 props配置第三种写法上一节:Vue 路由的基本使用路由的query参数先看效果我们需要创建一个 Detail.vue 组 ...
vue 传递对象路由_vue中路由参数传递可能会遇到的坑
前言 vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习 ...
vue 一个页面多个router-view如何配置子路由_前端开发：如何安装配置Vue路由？
大家好,我来了!本期为大家带来的Web前端学习知识是"前端开发:如何安装配置Vue路由?",喜欢Web前端的小伙伴,一起看看吧! Vue Router 是 Vue.js 官方的路由 ...
404 单页应用报错路由_通过 Laravel 创建一个 Vue 单页面应用（五）
文章转发自专业的Laravel开发者社区,原始链接:https://learnku.com/laravel/t/34858 我们在第4部分完成了编辑用户的功能,并且学习了如何使用 v-model 来监 ...
Vue路由（vue-router）详细讲解
中文文档:https://router.vuejs.org/zh/ Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际 ...
【Vue路由（router）进一步详解】
Vue路由(router)进一步详解 query属性具体实例代码如下: params属性具体实例代码如下: props属性 replace属性编程式路由导航路由缓存具体代码: 总结本篇文章 ...
Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
Vue路由（vue-router）详细讲解指南
中文文档:https://router.vuejs.org/zh/ Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际 ...

(转)一个vue路由参数传递的注意点

(转)一个vue路由参数传递的注意点相关推荐

最新文章

热门文章