关于Vue中两个vue页面传数据

Posted 2021-03-04 chalkbox

一个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编程式导航