keep-alive コンポーネントを使用して vue ページレベルの状態管理を実装する

<template>
  <div>
    <router-view />
  </div>
</template>

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

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import Profile from './components/Profile.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/profile', component: Profile }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

<template>
  <div>
    <h2>Home</h2>
    <keep-alive>
      <Counter :count="count" />
    </keep-alive>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  name: 'Home',
  components: {
    Counter
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<template>
  <div>
    <h2>Profile</h2>
    <keep-alive>
      <Counter :count="count" />
    </keep-alive>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  name: 'Profile',
  components: {
    Counter
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>