路由传参及跳转方式

简介: 路由传参及跳转方式

路由传参的三种方式
路由跳转有2种方式
1.标签式跳转
router-link 标签跳转 router-link会被解析成a便签 利用a标签的href属性

2.编程式跳转 用js的方式实现跳转

query传参

path 和name都可以
query传对象的时候 一定要先JSON.stringify('参数'), 获取 JSON.parse('参数')
query传参地址栏可见 ,问号后就是我们的参数
params传参

只能使用name传参
传对象的时候不需要转换为字符串,但是有一个弊端 就是第一次进来的时候能拿到参数,刷新会丢失
怎么解决刷新参数会消失的弊端??

在created钩子函数里面存本地 localStorage.setItem('params',JSON.stringify(this.$route.params.obj))
beforeDestroy里面清除本地
localStorage.removeItem('params')
动态路由传参

他的原理就是params

在router/index.js 的路由规则里面给他设置 —>动态 :

动态路由传多个参数 path: '/about/:user/:grades'

传 this.{item.name}/${item.grades}`)

接this.$route.params 是一个对象,参数都在这个对象里

相关文章
|
15天前
|
UED 开发者
ArkTS路由跳转与参数传递:深入理解与实践
在HarmonyOS应用开发中,ArkTS作为主要开发语言,其路由跳转和参数传递机制是实现页面间通信的关键。本文深入探讨了ArkTS中的路由跳转基础,包括页面跳转的方式(如pushUrl和replaceUrl)、参数传递的方法,以及如何在实际开发中应用这些知识,帮助开发者提升应用的用户体验和性能。
210 1
|
5月前
请说出路由传参和获取参数的三种方式
请说出路由传参和获取参数的三种方式
37 1
|
1月前
|
存储 小程序 JavaScript
小程序中页面传参的方式你都知道吗
小程序中页面传参的方式你都知道吗
36 0
|
6月前
|
网络架构
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
|
6月前
|
JavaScript Go
路由跳转及路由传参
路由跳转及路由传参
31 1
|
6月前
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
66 0
|
6月前
跳转传参的方式
跳转传参的方式
25 0
|
6月前
|
存储 小程序
小程序路由传参的方法?
小程序路由传参的方法?
114 0
|
6月前
|
JavaScript
vue路由获取菜单名称和路由跳转传参
vue路由获取菜单名称和路由跳转传参
71 0
|
JavaScript
vue路由跳转传参的方式有哪些
vue路由跳转传参的方式有哪些