Seeking guidance on importing JavaScript files correctly throughout my Vue project, including within the components used to implement changes with Vue-Router. Currently, encountering an issue where I must reload the component in order for the JavaScript to load properly; when navigating routes and changing components, the JavaScript functions only work after a manual refresh. It seems that I may not be including them correctly, as the Router Link alone is insufficient, leading to the Router View not loading the JavaScript for each component based on the route.
Here's a snippet from my index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-sfi</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="./static/Plugins/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="./static/Plugins/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="./static/Plugins/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="./static/Plugins/plugins/jqvmap/jqvmap.min.css">
<link rel="stylesheet" href="./static/Public/css/material.css">
<!-- Theme style -->
<link rel="stylesheet" href="./static/Plugins/dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="./static/Plugins/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="./static/Plugins/plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="./static/Plugins/plugins/summernote/summernote-bs4.css">
<link rel="stylesheet" href="./static/Public/css/styleSGB.css">
<link rel="stylesheet" href="./static/Public/css/aside.css">
// More links...
</head>
<body>
<div id="app"></div>
<!-- JavaScript imports -->
// More script imports...
</body>
</html>If needed, here's the file structure for reference:
/
|--> index.html
|--> /src
| |--> /components <----Vue Router components
| | |--> /interfaces
| | |--> /afiliacion
| | |--> afiliacion.vue
| | |--> /layouts
| | |--> /modules
| | |--> aside.vue
| | |--> footer.vue
| | |--> header.vue
| |--> /router
| | |--> index.js <----routes
| |--> App.vue
| |--> main.js
|--> /static
|--> /plugins <---- CSS and JavaScript files
|--> /public <---- CSS and JavaScript files.
Additionally, here's how the routes are set up:
// Route file
import Afiliacion from '@/components/Interfaces/Afiliacion/Afiliacion.vue'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Login',
component: Login,
meta: {
requiresVisitor: true
}
},
{
path: '/logout',
name: 'Logout',
component: Logout
},
{
path: '/Home',
name: 'Layout',
component: Layout,
meta: {
requiresAuth: true
},
children:[
{
path: 'Interfaces/Afiliacion',
redirect: '/Home/Afiliacion',
name: 'Afiliaciones',
component:{
render (c){ return c('router-view') }
},
children: [
{
path: '/AfiliacionFondo',
name: 'Afiliacion',
component: Afiliacion,
meta: {
requiresAuth: true
}
}]
Considering placing the CSS and JavaScript files in the src/assets folder as per common practice. Any assistance in resolving this issue would be greatly appreciated.