路由传参及跳转方式

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

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

相关文章
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
602 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
1129 0
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
29048 154
|
JavaScript
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
这篇文章详细介绍了Vue路由中的query参数、命名路由、params参数以及props配置的使用方式,并通过实际项目案例展示了它们在开发中的应用和测试结果,同时解释了`<router-link>`的`replace`属性如何影响浏览器历史记录。
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
|
搜索推荐 API UED
路由的query参数和params参数
理解并正确使用Query参数和Params参数,是构建清晰、高效Web应用的关键之一。开发者应根据实际应用场景灵活选择参数类型,从而优化用户体验和应用性能。
1473 6
|
JavaScript
Vue 报错Failed to mount component: template or render function not defined
Vue 报错Failed to mount component: template or render function not defined
Vue 报错Failed to mount component: template or render function not defined
|
JavaScript
vue中query和params传参的区别
vue中query和params传参的区别
647 0
|
JavaScript 网络架构
vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
vue 使用 this.$router.push 传参数,接参数的 query或params 两种方法示例
3599 4
|
JavaScript 前端开发
【Vue 3】如何实现动态表单生成器的拖拽功能?
【Vue 3】如何实现动态表单生成器的拖拽功能?
|
JavaScript 前端开发
跳转传参有几种方式
跳转传参有几种方式
337 0