vue用公共组件页面传值_vuejs几种不同组件（页面）间传值的方式

在应用复杂时，推荐使用vue官网推荐的vuex，以下讨论简单SPA(single-page application 简称为 SPA)中的组件间传值。

一、路由传值

路由对象如下图所示：

在跳转页面的时候，在js代码中的操作如下，在标签中使用标签

1

2

3

4

5

6

this.$router.push({

name: outePage,

query/params:

{

routeParams:params

}

需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题。

这样使用起来很方便，但url会变得很长，而且如果不是使用路由跳转的界面无法使用。取值方式分别为：this.$route.params.paramName和this.$route.query.paramName

注：使用params传值，也可以做到页面刷新，参数不丢失，在命名路由时这样设置：

{

path: /OrderDetail/:orderId/:type,

name: OrderDetail,

component: O