vue实现组件间跳转

vue实现组件间跳转的方法

在Vue中实现组件间跳转通常涉及路由跳转或组件间的直接通信。以下是几种常见的方法：

使用Vue Router进行路由跳转

通过Vue Router的router-link或编程式导航实现页面级组件跳转。

<router-link to="/target-path">跳转到目标页面</router-link>

this.$router.push('/target-path');

带参数跳转：

this.$router.push({ path: '/user', query: { id: '123' } });
this.$router.push({ name: 'user', params: { id: '123' } });

动态组件切换

通过<component :is="">和v-if实现组件间的动态切换。

<component :is="currentComponent"></component>
<button @click="currentComponent = 'ComponentA'">显示A</button>
<button @click="currentComponent = 'ComponentB'">显示B</button>

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}

父子组件通信跳转

通过props和$emit实现父子组件间的跳转控制。

父组件：

<child-component :show="showChild" @close="showChild = false"></child-component>
<button @click="showChild = true">打开子组件</button>

子组件：

export default {
  props: ['show'],
  methods: {
    close() {
      this.$emit('close');
    }
  }
}

全局状态管理（Vuex）

通过Vuex管理组件跳转状态，实现跨组件跳转控制。

store.js:

export default new Vuex.Store({
  state: {
    showModal: false
  },
  mutations: {
    toggleModal(state) {
      state.showModal = !state.showModal
    }
  }
})

组件中：

this.$store.commit('toggleModal');

事件总线（Event Bus）

创建全局事件总线实现非父子组件间通信。

创建eventBus.js:

import Vue from 'vue';
export const EventBus = new Vue();

发送事件：

EventBus.$emit('navigate', 'targetComponent');

接收事件：

EventBus.$on('navigate', (target) => {
  this.currentComponent = target;
});

provide/inject

祖先组件通过provide提供跳转方法，后代组件通过inject使用。

祖先组件：

export default {
  provide() {
    return {
      navigate: this.navigate
    }
  },
  methods: {
    navigate(target) {
      this.currentComponent = target;
    }
  }
}

后代组件：

export default {
  inject: ['navigate'],
  methods: {
    goTo(target) {
      this.navigate(target);
    }
  }
}

每种方法适用于不同场景：简单项目可用事件总线或动态组件，大型项目推荐Vue Router+Vuex组合。根据具体需求选择最合适的方式。