Vue コンポーネント通信におけるページ ジャンプ ソリューションの比較

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/user',
    component: User
  }
];

const router = new VueRouter({
  routes
});

export default {
  name: 'App',
  router
};
</script>

<template>
  <div>
    <button @click="gotoHome">跳转到Home页</button>
    <button @click="gotoUser">跳转到User页</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    gotoHome() {
      this.$router.push('/home');
    },
    gotoUser() {
      this.$router.push('/user');
    }
  }
}
</script>

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    currentPage: ''
  },
  mutations: {
    setCurrentPage(state, page) {
      state.currentPage = page;
    }
  }
});

<template>
  <div>
    <button @click="gotoHome">跳转到Home页</button>
    <button @click="gotoUser">跳转到User页</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  name: 'MyComponent',
  methods: {
    ...mapMutations(['setCurrentPage']),
    gotoHome() {
      this.setCurrentPage('/home');
    },
    gotoUser() {
      this.setCurrentPage('/user');
    }
  }
}
</script>

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'App',
  computed: {
    ...mapState(['currentPage'])
  },
  watch: {
    currentPage(page) {
      this.$router.push(page);
    }
  }
};
</script>

Vue.prototype.$bus = new Vue();

<template>
  <div>
    <button @click="gotoHome">跳转到Home页</button>
    <button @click="gotoUser">跳转到User页</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    gotoHome() {
      this.$bus.$emit('goto', '/home');
    },
    gotoUser() {
      this.$bus.$emit('goto', '/user');
    }
  }
}
</script>

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    this.$bus.$on('goto', page => {
      this.$router.push(page);
    });
  }
};
</script>