Laravel+Vue3路由跳转后Home组件JS失效问题求助

首次加载Home组件（首页）时，JS功能正常运行；但跳转到其他组件后再返回Home组件，JS就无法正常工作了。

相关代码文件 #

1. welcome.blade.php #

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Kabira</title>
  <meta name="description" content="Morden Bootstrap HTML5 Template">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" type="{{asset('newtheme/image/x-icon')}}" href="{{asset('newtheme/assets/img/favicon.ico')}}">
    
   <!-- ======= All CSS Plugins here ======== -->
  <link rel="stylesheet" href="{{asset('newtheme/assets/css/plugins/swiper-bundle.min.css')}}">
  <link rel="stylesheet" href="{{asset('newtheme/assets/css/plugins/glightbox.min.css')}}">
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&amp;display=swap" rel="stylesheet">

  <!-- Plugin css -->
  <!-- <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css"> -->
  
  <!-- Custom Style CSS -->
  <link rel="stylesheet" href="{{asset('newtheme/assets/css/style.css')}}">

  @vite('resources/css/app.css')
</head>
<body>
    <div id="app"></div>

    @vite('resources/js/app.js')

    <!-- All Script JS Plugins here  -->
  <!-- <script src="assets/js/vendor/popper.js" defer="defer"></script> -->
  <!-- <script src="assets/js/vendor/bootstrap.min.js" defer="defer"></script> -->

  <script src="{{asset('newtheme/assets/js/plugins/swiper-bundle.min.js')}}" defer="defer"></script>
  <script src="{{asset('newtheme/assets/js/plugins/glightbox.min.js')}}" defer="defer"></script>

  <!-- Customscript js -->
  <script src="{{asset('newtheme/assets/js/script.js')}}" defer="defer"></script>
  
</body>
</html>

2. app.js #

import './bootstrap';

import {createApp} from 'vue'

import App from './App.vue';
import router from './routes.js';
import './assets/css/style.css';
import './assets/css/plugins/swiper-bundle.min.css';
import './assets/img/favicon.ico';
import './assets/css/plugins/glightbox.min.css';
import './assets/js/plugins/swiper-bundle.min.js';
import './assets/js/plugins/glightbox.min.js';

createApp(App).use(router).mount("#app")

3. routes.js #

import {createRouter, createWebHistory}  from 'vue-router';
import homepagecomponent from './home/homeone.vue';
import aboutuscomponent from './pages/aboutUs.vue';
import contactuscomponent from './pages/contactUs.vue';
import shopgridcomponent from './shop/shopGrid.vue';

const routes = [
    {
        path: "/",
        name: "home",
        component : homepagecomponent,
    },
    {
        path : "/about-us",
        name : "about_us",
        component : aboutuscomponent,
    },
    {
        path : "/contact-us",
        name : "contact_us",
        component : contactuscomponent,
    },
    {
        path : "/shop",
        name : "shop",
        component : shopgridcomponent,
    }
];

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

export default router;

状态对比 #

• 首次加载页面时JS正常：
  
• 跳转后返回Home组件JS失效：
  

问题原因与解决方法 #

核心原因 #

第三方JS插件（Swiper、Glightbox）和自定义script.js仅在页面初始加载时执行一次，而Vue路由切换是单页面内组件替换，不会重新加载整个页面。返回首页时，这些插件的初始化代码未再次执行，导致依赖功能失效。同时app.js中直接导入第三方JS文件的方式无法实现组件级的重新初始化。

解决步骤 #

1. 移除全局重复脚本
   删除welcome.blade.php中的以下script标签，避免全局加载冲突：

   <script src="{{asset('newtheme/assets/js/plugins/swiper-bundle.min.js')}}" defer="defer"></script>
   <script src="{{asset('newtheme/assets/js/plugins/glightbox.min.js')}}" defer="defer"></script>
   <script src="{{asset('newtheme/assets/js/script.js')}}" defer="defer"></script>
   

2. 在Home组件内按需初始化
   修改homeone.vue，在组件挂载时初始化插件并迁移首页专属逻辑：

   <template>
     <!-- 首页原有内容 -->
   </template>
   
   <script setup>
   import { onMounted } from 'vue';
   import Swiper from 'swiper';
   import 'swiper/css/bundle';
   import GLightbox from 'glightbox';
   
   onMounted(() => {
     // 初始化Swiper，替换为你的实际配置
     new Swiper('.swiper-container', {
       loop: true,
       pagination: {
         el: '.swiper-pagination'
       }
     });
   
     // 初始化Glightbox
     GLightbox({
       selector: '.glightbox'
     });
   
     // 迁移原script.js中的首页专属逻辑，比如事件绑定、DOM操作等
     // 示例：
     // document.querySelector('.nav-toggle').addEventListener('click', () => {
     //   document.body.classList.toggle('nav-open');
     // });
   });
   </script>
   

3. 清理无效导入
   删除app.js中无意义的JS文件导入：

   import './assets/js/plugins/swiper-bundle.min.js';
   import './assets/js/plugins/glightbox.min.js';
   

额外说明 #

如果script.js包含全局通用逻辑，可将其改造为Vue插件或在App.vue的mounted钩子中执行；首页专属逻辑必须放在Home组件内部，确保每次组件挂载时重新初始化。

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