路由传参及跳转方式

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

路由传参的三种方式
路由跳转有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 是一个对象,参数都在这个对象里

相关文章
ECharts 饼图数据放在饼图内部显示
ECharts 饼图数据放在饼图内部显示
732 0
|
缓存 JavaScript
vue阻止浏览器刷新和关闭页面提示
使用场景:在使用vuex进行缓存管理时,页面的缓存会随着页面关闭而消失,如果缓存动作仍在进行中,关闭页面会导致数据丢失,此时需要阻止页面关闭
1605 3
|
SQL Java 应用服务中间件
Java项目防止SQL注入的四种方案
Java项目防止SQL注入的四种方案
401 0
|
JSON 小程序 JavaScript
|
11月前
交换机中创建MAC地址表
【10月更文挑战第1天】
356 2
|
11月前
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
515 0
|
存储 安全 关系型数据库
FileZilla Server提权与常见问题
FileZilla Server提权与常见问题
904 0
vue3 中 h 函数的使用
vue3 中 h 函数的使用
226 0
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
278 0
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
|
JavaScript 前端开发 容器
echarts 基础入门(上)
echarts 基础入门(上)
331 0