堆棧內存溢出
  簡體   English   中英

如何導入 javascript 文件以與 Vue-Router 一起使用

[英]How to import javascript files to use with Vue-Router

 原文  2020-03-09 14:58:54  2   1    javascript/ vue.js/ vue-router

問題描述

我想知道在我的整個 Vue 項目中導入 javascript 文件的正確方法是什么，還包括在我用來使用 Vue-Router 進行更改的組件中，我目前的問題是我必須重新加載組件Javascript是在每一個中加載的，也就是說，如果我改變了Route，因此改變了組件，Javascript功能只有在每一個都做F5時才起作用，而Router Link是不夠的，我想是因為我不是以正確的方式包含它們，並且路由器視圖不會根據路由在每個組件中加載 Javascript。

這是我的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>

這是我的文件結構，以防您需要知道有什么問題：

/
    |--> 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.

這是路由文件。

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
          }
        }]

我已經在src/assets文件夾中讀到 CSS 和 Javascript 應該放在那里，這也許是我應該放置它們的地方，但我想幫助我。

1 個解決方案

解決方案1
 0 已采納  2020-03-09 21:52:12

將 jQuery 導入到 vue 項目的最簡單方法。

安裝依賴

npm install vue-jquery --save

在 main.js 文件中

從 'vue-jquery' 導入 vue-jquery

Vue.use(vue-jquery)

如果你想在 vue 中使用外部庫，你必須使用 npm 安裝。 然后你像我在上面導入 jQuery 一樣導入它。

AdminLTE Vue

這是Vue AdminLTE 試試吧。 在這里你只需要執行 npm i 。

https://vuejsadmin.com/product/vue2-admin-lte/

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在Vue-router中使用addroutes方法？ 如何在 vue-router 中使用 Vuetify 選項卡 在混合中使用vue-router 如何在 Vue-router 中使用 $router.push？ 如何更新vue-router vue-router：如何不`saveScrollPosition` vue-router意外導入令牌 Vue-router 帶有 Typescript 和 beforeEnter 保護，如何使用經過驗證的數據？ vue-router 中 Javascript 函數的問題 如何正確使用 vue-materials tab router 和 vue-router？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM