How to import javascript files to use with Vue-Router
Question
I would like to know what is the correct way to import javascript files in my entire Vue project, also include in the components that I use to make the changes with Vue-Router, that my current problem is that I have to reload the component so that the Javascript is load in each one, that is, if I change the Route and therefore of component, the Javascript functions only work when doing F5 in each one, and the Router Link is not enough, I suppose it is because I am not including them in the way correct and the Router View does not load the Javascript in each component according to the route.
This is 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 Bbootstrap 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">
<link rel="stylesheet" href="./static/Public/css/tables.css">
<!-- Ion Slider -->
<link rel="stylesheet" href="./static/Plugins/plugins/ion-rangeslider/css/ion.rangeSlider.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div id="app"></div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="./static/Plugins/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="./static/Plugins/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
;
</script>
<!-- Bootstrap 4 -->
<script src="./static/Plugins/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="./static/Plugins/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="./static/Plugins/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="./static/Plugins/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="./static/Plugins/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="./static/Plugins/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="./static/Plugins/plugins/moment/moment.min.js"></script>
<script src="./static/Plugins/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="./static/Plugins/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="./static/Plugins/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="./static/Plugins/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="./static/Plugins/dist/js/adminlte.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="./static/Plugins/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="./static/Plugins/dist/js/demo.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<!-- Ion Slider -->
<script src="./static/Plugins/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
</body>
</html>
This is my file structure in case you need to know that something is wrong:
/
|--> index.html
|--> /src
| |--> /components <----components Vue Router
| | |--> /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.
This is the file for the routes.
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
}
}]
I have read that in the src/assets folder the CSS and Javascript should go, which is perhaps where I should place them, but I would like to help me please.
1 answers
solution1
0 ACCPTED 2020-03-09 21:52:12
Easiest way of importing jQuery to vue project.
install dependencies
npm install vue-jquery --save
In the main.js file
import vue-jquery from 'vue-jquery'
Vue.use(vue-jquery)
You have to install with npm if you want to use external libraries in vue. Then you import it the same way i imported jQuery above.
AdminLTE Vue
This is the Vue AdminLTE try it. Here you just have to execute npm i.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.