一个vue页面路由跳转到另一个vue页面想要获得前一个页面的数据的方法:路由传参
路由传参方法适用于:
1:在A页面获得数据提交给B页面 / 将A页面的数据给B页面
2:A页面中点击按钮跳转到B页面,B页面需要使用A页面中的数据
Vuex和本地缓存的方法就不讲了
问题:为什么使用这种方法?
答:在A页面点击按钮路由跳转到B页面了,但是我在B页面还需要A页面中的数据
这是数据: data: ‘chalk‘ 这是router/index.js中的两个路由地址: { path: ‘/theme‘, name: ‘theme‘, component: Theme }, { path: ‘/theme/:id‘, name: ‘themeedit‘, component: ThemeEdit } 这是固定路由地址: { path: ‘/theme/themeedit‘, name: ‘themeedit‘, component: ThemeEdit }
用法解答:
第一种用法:
A页面利用: this.$router.push({ path: `/theme/${this.data}` }) 获得你想要的数据
利用桥梁(路由地址):{ path: ‘/theme/:id‘, name: ‘theme‘, component: ThemeEdit }
B页面可以通过: $route.params.id 获取数据
例如:内容中利用插槽表达式 {{ $route.params.id }}
或者赋值给私有数据:this.data = this.$route.params.id
但是,路由地址会带有数据,此时页面地址为: http://localhost:8080/#/theme/chalk
第二种用法:
A页面利用: this.$router.push({ name: ‘themeedit‘, params: { id: this.data } })
利用桥梁(路由地址):{ path: ‘/theme/themeedit‘, name: ‘themeedit‘, component: ThemeEdit }
B页面数据获取方式和上面相同
此时页面路由地址固定为:http://localhost:8080/#/theme/themeedit
B页面中更多数据获取方法参考:$router的耦合与解耦
建议用规定之内的方法传参,参考:Vue编程式导航
原文地址:https://www.cnblogs.com/chalkbox/p/12549437.html
时间: 2024-11-03 21:32:47