如何在vue项目中利用keep-alive组件实现无刷新效果

<template>  <div>    <h2>Home页面</h2>    <p>计数器: {{ count }}</p>    <button @click="increment">增加</button>  </div></template><script>export default {  data() {    return {      count: 0    };  },  methods: {    increment() {      this.count++;    }  }};</script>

<template>  <div>    <h2>About页面</h2>    <p>计数器的值: {{ count }}</p>    <button @click="goBack">返回</button>  </div></template><script>export default {  computed: {    count() {      return this.$store.state.count;    }  },  methods: {    goBack() {      this.$router.go(-1);    }  }};</script>

import Vue from 'vue';import Router from 'vue-router';import Home from '@/views/Home.vue';import About from '@/views/About.vue';Vue.use(Router);export default new Router({  routes: [    {      path: '/',      name: 'Home',      component: () => import('@/views/Home.vue'),      meta: {        keepAlive: true // 设置keep-alive为true      }    },    {      path: '/about',      name: 'About',      component: () => import('@/views/About.vue'),      meta: {        keepAlive: false // 设置keep-alive为false      }    }  ]});

<template>  <div id="app">    <keep-alive>      <router-view :key="$route.fullPath"></router-view>    </keep-alive>  </div></template>