拆分Laravel与Vue后，如何让Vue仅改链接不刷新页面？

问题根源 #

之前Laravel内嵌Vue时，默认启用了Vue Router的history模式，搭配Laravel路由的fallback配置，点击链接由Vue Router接管，不会触发浏览器刷新。拆分后没配置这两项，浏览器会把链接当成普通HTTP请求，每次都刷新页面、重新加载资源，自然导致性能下降。

具体修复步骤 #

• 前端Vue配置路由history模式
  在Vue项目的路由配置文件（通常是src/router/index.js）中，将路由模式改为history：

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import routes from './routes'
  
  Vue.use(VueRouter)
  
  const router = new VueRouter({
    mode: 'history', // 关键：开启history模式
    base: process.env.BASE_URL,
    routes
  })
  
  export default router
  

• 用Vue Router的<router-link>替代原生<a>标签
  页面内所有跳转链接，都替换为<router-link to="/目标路径">。比如把<a href="/home">首页</a>改成<router-link to="/home">首页</router-link>。原生<a>会触发浏览器跳转，而<router-link>由Vue Router处理，实现无刷新跳转。

• 后端Laravel配置路由fallback
  如果前端打包后部署在Laravel的public目录下，在routes/web.php中添加fallback路由，让所有非API请求返回前端的index.html：

  // 先定义你的API路由或其他后端路由
  Route::apiResource('/posts', PostController::class);
  
  // 最后添加fallback路由
  Route::get('/{any}', function () {
      return file_get_contents(public_path('index.html'));
  })->where('any', '.*');
  

  若前端是独立域名部署，需在前端的Web服务器（Nginx/Apache）配置重定向规则，将所有请求指向index.html以支持history模式。比如Nginx的配置：

  location / {
      try_files $uri $uri/ /index.html;
  }
  

完成以上配置后，点击链接会由Vue Router接管，实现无刷新跳转，页面加载性能也会恢复到之前的水平。

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