Vue3项目Vue Router路由切换失效且首页无法显示问题排查

问题修复方案 #

1. 路由切换失效修复 #

你项目使用的是Vue3，对应的vue-router 4.x版本已经废弃了Vue2时期new VueRouter()的初始化语法，这是路由无法正常切换的核心原因。
首先安装适配Vue3的vue-router版本：

npm i vue-router@4

修改你的router.js代码如下：

// 顶部导入Vue Router 4.x对应的API
import { createRouter, createWebHistory } from 'vue-router'
// 确认三个页面组件的导入路径正确、组件正常default导出
import Main from './pages/Main.vue'
import History from './pages/History.vue'
import Favorites from './pages/Favorites.vue'

const routes = [
  {
    path: "/",
    component: Main
  },
  {
    path: "/history",
    component: History
  },
  {
    path: "/favorites",
    component: Favorites
  }
];
// 用createRouter替代new VueRouter，指定history模式
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

2. 首页内容不可见修复 #

该问题和路由初始化失败直接相关，路由实例没有正确注册到Vue应用时，router-view不会渲染任何匹配的组件内容。完成上述路由代码修复后，确认Main组件路径正确、组件已经正常导出，首页内容即可正常显示。

可选优化：Header组件语义调整 #

你当前写法存在button和router-link两个可点击元素嵌套的问题，不符合HTML语义规范，可调整为如下写法：

<template>
  <header class="sticky top-0 z-40 w-full flex bg-yellow-500 md:h-16 shadow-md">
    <div class="w-1/4 flex justify-end">
      <router-link to="/favorites" custom v-slot="{ navigate, isActive }">
        <button @click="navigate" title="Favorites" class="p-2 hover:text-red has-tooltip" :class="isActive ? 'text-red' : ''">
          Favorites
        </button>
      </router-link>
      <router-link to="/history" custom v-slot="{ navigate, isActive }">
        <button @click="navigate" title="History" class="p-2 hover:text-red" :class="isActive ? 'text-red' : ''">
          History
        </button>
      </router-link>
    </div>
  </header>
</template>

内容的提问来源于stack exchange，提问作者Festina