路由器链接不会加载页面

Question

找不到我做错了什么。如果我在浏览器上输入网址，页面会加载，但导航栏中的链接不会执行任何操作。我正在尝试三种不同的方式来使用 router-link，但没有区别。它只是不会通过链接呈现页面。控制台上没有错误。在 vue devtools 上，路由显示正确的路径。

应用程序.vue：

<template>
    <nav class="navbar">
      <router-link :to="{ path: '/' }">Home</router-link>
      <router-link :to="{name:'TheDashboard'}"> Dashboard</router-link>
      <router-link to="/games">Games</router-link>
    </nav>
    <router-view></router-view>    
</template>

路由器/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import TheHomePage from '@/pages/TheHomePage'
import TheDashboard from '@/pages/TheDashboard'

const routes = [
  {
    path: '/',
    name: 'TheHomePage',
    component: TheHomePage
  },
  {
    path: '/dashboard',
    name: 'TheDashboard',
    component: TheDashboard
  },
  {
    path: '/games',
    name: 'TheGames',
    component: () => import(/*webpackChunkName: "games" */ '@/pages/TheGames.vue'),
    props: true
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})


export default router

main.js：

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'


const prototype = createApp(App)
prototype.use(router)
prototype.use(store)

prototype.mount('#app')

Answer 1

最终这是 Vue devtools 引起的错误。我删除了以前的版本并更新到最新版本，现在可以使用了。代码没有任何问题。我想我最好把代码留在这里，因为它可能对其他人有帮助。