vue-router的动态路由传对象2种方式

最新推荐文章于 2024-07-11 09:36:26 发布
最新推荐文章于 2024-07-11 09:36:26 发布
阅读量1.6k 收藏 2
点赞数
文章标签： javascript json ViewUI
原文链接：https://my.oschina.net/wxh1989/blog/1505311
版权 
第一种方式：
传参
this.$router.push({ name: 'framecore', query: {form: result}});
接收
$route.query.form.id

------------------------------------------------------------------------------------------------------------

第二种方式
传参
this.$router.push({ name: 'framecore', params: {form: JSON.stringify({iid:1})}});
接收 
$route.params.form.id

转载于:https://my.oschina.net/wxh1989/blog/1505311

choushuaiji8577
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中动态路由传值
nanzhuhe的博客
03-21 476
方式一 <router-link to="/class/classInfo">classInfo</router-link> 在路由配置的时候设置路由参数 {{$route.params.id}}以这种方式在页面中获取参数 方式二 <router-link :to="{name:'classInfo',params:{classInfo:'classInfo'}}"...
react更改路由入参_react路由传参的三种方式:
weixin_39883440的博客
12-20 913
1. params 传值:该方式传递参数只能通过字符串的方式传递，如果要传递一个对象，需要先将这个对象转化成字符串(JSON.stringify(obj)),接收参数的时候要用this.props.params.xxx，接收参数的时候也可以转成对象使用JSON.parse(string)router.push({name:'/detail:id',params:{id:item.id}})2. q...
vue this.$router 的用法
最新发布
suk_java的博客
07-11 323
vue this.$router 的用法
Vue项目中使用路由$router在页面间传输对象数据
u012211003的博客
07-23 2644
有时候需要在后一个页面使用前一个跳转页面的对象，一般使用vuex用来管理对象的状态，但仅仅使用一次该对象的话是没有必要去使用vuex的，直接使用$router在跳转页面时携带对象一起跳转到下一页面会更加方便，这样下一页面接收到上个页面的对象后即可直接使用。 1. 在前一页面的跳转路由中使用query关键字包裹对象 this.$router.push({ path: "/CompanyEdit", query: { clickCorporateId: this.zTreeNode } }
router-link传递对象
a5252145的博客
12-16 1825
router-link传递对象 传递：JSON.stringify(obj)} 获取：JSON.parse(decodeURIComponent(obj)) <router-link :to="{name:'detail', query: {item:JSON.stringify(firItem)}}" target="_blank" >{{ firItem.name.r...
vue的七种动态路由传参
Lemontree_fu的博客
07-24 1435
params传参(4种) 1.给路由的规则中配置接收参数 { path: '/details/:yaxu', name: 'details', component: () => import( '../views/Details.vue') }, 2.发送数据 （1）编程式导航发送数据2种写法 1.this.$router.push("/路径/数据") 示例:this.$router.push('/details/我是从one页面过来的')
基于vue-router 多级路由redirect 重定向的问题
10-18
Vue-router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。在实际项目中，路由的配置和重定向操作非常常见，尤其是在处理多级路由时，可能会遇到一些问题。本文将详细介绍在使用 vue-router 实现多级路由...
详解vue-router 动态路由下子页面多页共活的解决方案
10-15
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } ] }); ``` `User` 组件通常会根据 `id` 参数获取并显示用户信息： ```vue <div>{{ user.name }} export ...
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
vue-router路由参数刷新消失的问题解决方法
01-21
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: ‘index’, params: res.data})传给主页组件，并在主页显示数据。但是刷新页面后，数据就消失了。 解决...
vue 路由对象属性
01-07
更多路由属性查看官网 this.$route.path 类型: string 字符串，对应当前路由的路径，总是解析为绝对路径，如 /foo/bar。 this.$route.params 类型: Object 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。 this.$route.query 类型: Object 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 this.$route.query.user == 1，如果没有查询参数，则是个空
详解如何使用router-link对象方式传递参数？
10-17
主要介绍了如何使用router-link对象方式传递参数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 传递 对象 路由_详解vue路由
weixin_31721961的博客
01-30 1401
前端路由和后端路由：后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源前端路由：对于单页面应用程序来说，主要通过url的hash(#)来实现不同页面的切换，同时hash还有一个特点HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由路由的使用1.创建一...
【Vue】在 Vue Router 中传递和解析对象数据
weixin_45968070的博客
04-23 459
为了解决对象数据传递和解析的问题，我们可以将对象先转换为字符串，并对字符串进行 URL 编码。在发送端，可以使用 JSON.stringify 方法将对象转换为字符串，然后使用 encodeURIComponent 函数对字符串进行编码。在接收端，使用 decodeURIComponent 函数对 URL 查询参数进行解码，并使用 JSON.parse 方法将字符串解析为对象。然而，直接传递对象会导致数据丢失或不正确解析的问题，因为对象不能直接被编码成 URL 查询参数形式。
vue 跳转页面带对象_Vue this.$router.push(参数)实现页面跳转操作
weixin_28691003的博客
02-22 2431
很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转。push 后面可以是对象，也可以是字符串：// 字符串this.$router.push('/home/first')// 对象this.$router.push({ path: '/home/first' })// 命名的路由this.$r...
router 传参直接传个对象
fengwuky的博客
11-15 68
vue-router学习二：动态路由（路由传递数据的一种方式），路由懒加载，嵌套路由，路由传递参数方式，导航守卫，keep-alive标签
冯安晨
03-16 1198
文章目录前言十一、动态路由十二、认识路由的懒加载十三、路由懒加载的效果十四、懒加载的方式十五、认识嵌套路由十六、嵌套路由实现十七、嵌套默认路径十八、准备工作十九、传递参数的方式1. 传递参数方式一: ``2. 传递参数方式二: JavaScript代码二十、获取参数1. $ route和$ router是有区别的导航守卫1. 为什么使用导航守卫?2. 导航守卫使用3. 导航守卫补充二一、keep-alive遇见vue-router二二、TabBar实现1. TabBar实现思路2. TabBar代码实现 前
Vue路由传参要传对象怎么办？
dayangcome的博客
02-01 441
Vue路由传参一般用params和query两种方式，但这两种都不能直接支持传入对象，需要把对象用JSON形式转化为字符串再传。但是如果用query方式传的话，对象属性太长，地址后面问号会多很长的一串，非常不好看。
Vue-router动态路由详解与实战应用
动态路由在Vue Router中是一种灵活的路由方式，特别适用于那些页面结构相似但内容因数据变化而异的场景，如商品详情页，通过不同的商品ID来动态渲染不同的页面。动态路由的核心在于使用路径参数，允许在路由配置中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值