Vue 3+Vue Router 4路由异常：切换URL路径视图不更新求助

执行webpack-dev-server --mode development启动应用后，根路径/可正常加载内容，但切换到/test时页面视图无变化，核心问题及修复方案如下：

问题根源 #

1. 路由配置逻辑错误：将根组件App.vue作为/路径的路由组件，但main.js中已将App挂载为应用根实例，导致组件重复渲染，路由切换时没有正确的渲染出口。
2. 缺少路由视图容器：App.vue未添加<router-view>标签，Vue Router无法将匹配的路由组件渲染到页面中。
3. 依赖版本不兼容：package.json中使用了Vue 2的vue-template-compiler，Vue 3需使用@vue/compiler-sfc，可能引发模板编译异常。

分步修复 #

1. 修正路由配置（src/router/index.js） #

移除App.vue的路由项，将根路径指向实际页面组件：

import { createRouter, createWebHistory } from 'vue-router'
import Homepage from '../components/Homepage.vue'

// 若/test需显示不同组件，替换为对应组件即可
const routes = [
  { path: '/', component: Homepage },
  { path: '/test', component: Homepage }
]

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

export default router

2. 给App.vue添加路由渲染出口 #

在App.vue中添加<router-view>，作为路由组件的挂载容器：

<template>
  <div id="app">
    <!-- 路由匹配的组件会渲染在此处 -->
    <router-view></router-view>
  </div>
</template>

<script setup>
// 可添加全局业务逻辑
</script>

3. 修复依赖版本 #

卸载Vue 2模板编译器，安装Vue 3适配版本：

npm uninstall vue-template-compiler
npm install -D @vue/compiler-sfc

4. 补全webpack配置缺失项 #

在webpack.config.js顶部导入path模块，避免devServer.static.directory报错：

const path = require('path'); // 新增此行
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  // ...其他配置保持不变
}

验证修复 #

重启开发服务器：

npm run serve

此时切换/和/test路径，页面视图应能正常更新。

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