vue 传递对象路由_vue中路由参数传递可能会遇到的坑

前言

vue中路由跳转传参数有多种,自己常用的是下面的几种

通过router-link进行跳转

通过编程导航进行路由跳转

本文主要给大家介绍了关于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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对萬仟网的支持。

希望与广大网友互动？？

点此进行留言吧！

vue 传递对象路由_vue中路由参数传递可能会遇到的坑相关推荐

vue 数组对象提取_vue中使用对象数组的最佳实践
前言: 在平常的开发中,经常会在vue中用到对象数组,如渲染一个小区的列表,数据结构可能如下所示: CommunityList: [ { _id: '', community_code: '', co ...
vue 一直登录错误_vue中路由拦截无限循环的情况
如下图,浏览器报出这个错误这是因为路由守卫在拦截路由的时候,找不到跳转的地址,引起了无限循环. 在设置路由拦截的时候当指向另一个地址的时候还会触发一次路由拦截,既每次地址栏的变化都会触发一次路由拦截 ...
SAP UI5 应用开发教程之三十 - SAP UI5 的路由过程中进行参数传递试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
vue 传递对象路由_vue 04 -vue路由对象（$route）参数简介以及和router的区别
vue路由对象($route) 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以 ...
vue 传递对象路由_javascript – 如何在Vue中提交表单,重定向到新路由并传递参数？...
< form>的默认行为是重新加载页面onsubmit.在实施SPA时,最好避免调用< form>的默认行为. 利用nuxtjs中现成的路由器模块,可以使所有重定向控件在应用程 ...
vue 用户名重复验证_Vue中的验证登录状态
Vue项目中实现用户登录及token验证先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据使用axios请求登录接口,匹配账号和密码账号密码验证后, 拿到token,将to ...
vue项目统一响应_vue中使用$set实现深入响应式原理
前言:其实使用vue的都知道,vue声明在data中的属性都是响应式的,也就是,我们在修改data中的属性时,一般页面都能实时更新.但是由于 JavaScript 的限制,Vue 不能检测数组和对象的 ...
阻止路由跳转得方式_vue中路由跳转的三种方式简洁易懂
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
vue 请求参数数组_vue中get请求如何传递数组参数
前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组 1.问题 ...

vue 传递对象路由_vue中路由参数传递可能会遇到的坑

vue 传递对象路由_vue中路由参数传递可能会遇到的坑相关推荐

最新文章

热门文章

vue 传递 对象 路由_vue中路由参数传递可能会遇到的坑

vue 传递 对象 路由_vue中路由参数传递可能会遇到的坑相关推荐

最新文章

热门文章

vue 传递对象路由_vue中路由参数传递可能会遇到的坑

vue 传递对象路由_vue中路由参数传递可能会遇到的坑相关推荐