Vue3+PHP环境下router-link无法跳转页面问题求助

1. 路由配置核心错误 #

你的routes.js把根组件App.vue作为首页路由组件，这是错误的。App.vue是Vue应用的根容器，必须在其中添加<router-view>标签，用来渲染匹配到的路由组件，而非作为路由组件本身。

修复步骤： #

• 创建单独的Home.vue组件（比如放在resources/js/pages/Home.vue）作为首页内容：

<template>
  <div>首页内容</div>
</template>

• 修改routes.js，替换首页组件并移除App.vue的导入：

import * as VueRouter from 'vue-router'
import {createRouter, createWebHistory} from 'vue-router';

// 导入Home组件，移除App的导入
import Home from './pages/Home.vue';
import Post from './pages/Post.vue';

const routes=[
    {
        path: '/',
        name: 'home',
        component: Home // 替换为Home组件
    },
    {
        path: '/post',
        name: 'post',
        component: Post
    },
]
    
const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes,
})
export default router;

• 在App.vue中添加<router-view>，确保路由组件能被渲染：

<template>
  <div id="app">
    <Header />
    <!-- 路由视图，用于显示匹配的页面组件 -->
    <router-view></router-view>
  </div>
</template>

<script setup>
import Header from './components/Header.vue';
</script>

2. router-link冗余代码清理 #

你的Header.vue里router-link绑定了空的v-on:click=""，完全没必要，直接删除即可：

<ul>
  <li>
    <router-link to="/">Home</router-link>
  </li>
  <li>
    <router-link to="/post">Post</router-link>
  </li>             
</ul>

3. routes.js的正确位置 #

routes.js必须放在**resources/js目录下**（和app.js同层级，或子目录如resources/js/router/routes.js），只要app.js的导入路径正确即可：

• 同层级时：import router from './routes.js'（你当前写法正确）
• 放在router子目录时：import router from './router/routes.js'

注意：不要把它放在Laravel的routes目录（PHP路由目录）下，前端资源需在resources/js中编译，放在PHP路由目录会被当成后端文件，无法被前端打包工具处理。

4. Laravel路由验证 #

你的web.php配置是正确的，它将所有请求指向app.blade.php视图，确保Vue接管路由。只需确认app.blade.php有正确的挂载点：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue App</title>
    @vite('resources/js/app.js')
</head>
<body>
    <div id="app"></div>
</body>
</html>

最终验证步骤 #

1. 确认所有组件文件路径正确（如pages/Home.vue、pages/Post.vue确实存在）
2. 重新编译前端资源：运行npm run dev或npm run build
3. 访问页面，点击router-link即可看到路由切换效果

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