vue怎么跨页面传参

在Vue中，可以使用路由参数和路由状态管理来实现跨页面传参。下面分别介绍这两种方法：

1、路由传参

在Vue Router中，可以通过路由参数来传递数据。在定义路由时，可以使用动态路由参数来接收参数值，在组件中通过this.$route.params来获取参数值。

首先，在路由配置文件中定义带参数的路由：

// 路由配置文件（router.js）
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: UserComponent
  }
];

然后，在组件中通过$route.params来获取参数值：

// 组件（UserComponent.vue）
export default {
  created() {
    const userId = this.$route.params.id;
    // 使用获取到的参数值进行相应的操作
  }
}

当切换到/user/123路径时，$route.params.id的值将为123。

2、路由状态管理

如果需要在多个页面之间传递复杂的数据或共享状态，可以使用路由状态管理。在Vue中，可以使用Vuex来实现路由状态管理。

首先，在Vuex中定义一个全局状态，并提供相应的getter和mutation方法：

// Vuex store（store.js）
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userData: null
  },
  getters: {
    getUserData: state => state.userData
  },
  mutations: {
    setUserData(state, data) {
      state.userData = data;
    }
  }
});

然后，在需要传递数据的页面中通过mutation方法来设置数据：

// 组件A
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['setUserData']),
    sendData() {
      const data = {
        name: 'John',
        age: 25
      };
      this.setUserData(data);
    }
  }
}

最后，在需要接收数据的页面中通过getter方法来获取数据：

// 组件B
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getUserData']),
    userData() {
      return this.getUserData;
    }
  }
}

1. 在组件B中，可以通过this.userData来获取从组件A传递过来的数据。

以上是在Vue中实现跨页面传参的两种常用方法：路由参数和路由状态管理。选择哪种方法取决于具体的需求和场景。