vue prefetch가 정상적으로 작동하는게 맞는지 모르겠습니다.

안녕하세요!

강의 수강하면서 코드를 계속 따라서 작성했는데, 

prefetch가 정상적으로 작동하는게 맞는지 잘 모르겠어서 이렇게 gif로 화면 한 번 올려봅니다.

/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
// import Contact from '../views/Contact.vue'
// import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // {
  //   path: '/About',
  //   name: 'About',
  //   component: About
  // },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/contact',
    name: 'Contact',
    // component: Contact

    component: () => import(/* webpackChunkName: "contact", webpackPrefetch:true*/ '../views/Contact.vue')
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

vue.config.js

module.exports = {
    chainWebpack: config => {
      config.plugins.delete('prefetch');
    }
}

코드도 위와 같이 작성을 했는데 , 어떤 부분이 문제인지 잘 모르겠습니다. ㅠ