vue2不同页面传值

### Vue2 页面间传值方法 #### 路由传参 利用 Vue Router 的参数功能可以在页面之间传递简单的字符串或者数值类型的参数。这种方式适合用于少量数据的传输。 ```javascript // 定义路由配置时设置动态路径参数 :id const routes = [ { path: '/user/:id', component: User } ] // 导航到带参数的目标页面 this.$router.push({ name: 'user', params: { id: userId } }) ``` 当目标组件被渲染时，可以通过 `this.$route.params` 获取这些参数[^1]。 #### Vuex 状态管理 对于复杂应用中的全局状态共享问题，推荐使用 Vuex 来集中管理和维护应用程序的状态。任何地方都可以访问并修改存储于 store 中的数据，从而实现了跨页面通信的目的。 ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0, }, mutations: { increment (state) { state.count++ } } }) ``` 其他组件读取或更改此计数器只需调用相应的 getter 和 action 即可完成操作。 #### Props 属性与自定义事件 父级向子级传递属性（props），而子级则可通过触发自定义事件来通知父级某些事情发生。这种模式适用于有层次关系的父子组件之间的通讯。 ```html <!-- ParentComponent.vue --> <template> <ChildComponent v-bind:message="parentMessage" @childEvent="handleChildEvent"/> </template> <script> export default { data () { return { parentMessage: '' } }, methods: { handleChildEvent(value){ console.log('Received message:', value); } } } </script> ``` ```html <!-- ChildComponent.vue --> <template> <div>{{message}}</div> </template> <script> export default { props: ['message'], mounted(){ this.$emit('childEvent','Hello Parent'); } } </script> ``` #### EventBus 实现松耦合的消息机制 如果不想引入额外库又希望保持组件间的解耦，则可以考虑采用发布/订阅模式下的 Event Bus 方案。先创建一个单独文件用来实例化一个新的 Vue 对象作为消息中心，在需要发送信息的地方发射特定名称的事件；接收方监听该类名即可响应处理逻辑[^3]。 ```javascript // eventBus.js import Vue from 'vue'; export const bus = new Vue(); // ComponentA 发送者 bus.$emit('event-name', payload); // ComponentB 接收者 bus.$on('event-name', function(payload){...}); ``` 以上几种都是常用的 Vue 组件间乃至整个单页应用内部各部分相互交流的有效手段之一，实际开发过程中可根据具体情况选用最合适的方案[^4]。