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

Posted chalkbox

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于Vue中两个vue页面传数据相关的知识,希望对你有一定的参考价值。

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

以上是关于关于Vue中两个vue页面传数据的主要内容,如果未能解决你的问题,请参考以下文章

Vue 父子组件、兄弟组件传值

Vue组件传值及页面缓存问题

vue单页面多级目录实现

vue组件间传递对象的深拷贝

vue兄弟组件传参

vue点击按钮打开组件并向组件传值