如何导入 javascript 文件以与 Vue-Router 一起使用
[英]How to import javascript files to use with Vue-Router
问题描述
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.
我想知道在我的整个 Vue 项目中导入 javascript 文件的正确方法是什么，还包括在我用来使用 Vue-Router 进行更改的组件中，我目前的问题是我必须重新加载组件Javascript是在每一个中加载的，也就是说，如果我改变了Route，因此改变了组件，Javascript功能只有在每一个都做F5时才起作用，而Router Link是不够的，我想是因为我不是以正确的方式包含它们，并且路由器视图不会根据路由在每个组件中加载 Javascript。
This is my index.html :这是我的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.我已经在src/assets文件夹中读到 CSS 和 Javascript 应该放在那里，这也许是我应该放置它们的地方，但我想帮助我。
1 个解决方案
解决方案1
0 已采纳 2020-03-09 21:52:12
Easiest way of importing jQuery to vue project.将 jQuery 导入到 vue 项目的最简单方法。
install dependencies安装依赖
npm install vue-jquery --save npm install vue-jquery --save
In the main.js file在 main.js 文件中
import vue-jquery from 'vue-jquery'从 'vue-jquery' 导入 vue-jquery
Vue.use(vue-jquery) Vue.use(vue-jquery)
You have to install with npm if you want to use external libraries in vue.如果你想在 vue 中使用外部库，你必须使用 npm 安装。 Then you import it the same way i imported jQuery above.然后你像我在上面导入 jQuery 一样导入它。
AdminLTE Vue AdminLTE Vue
This is the Vue AdminLTE try it.这是Vue AdminLTE 试试吧。 Here you just have to execute npm i.在这里你只需要执行 npm i 。
https://vuejsadmin.com/product/vue2-admin-lte/ https://vuejsadmin.com/product/vue2-admin-lte/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.