0

在我的项目中，当我从一个页面移动到另一个页面时<router-link>，JavaScript 不起作用，请查看图像以了解我的意思。

在此处输入图像描述

第一次刷新页面时，一切正常，但是当我去例如测试页面（从localhost:8000/到localhost:8000/test）时，javascript不起作用，有人帮我吗？

我的app.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Vue App</title>
        <link rel="stylesheet" type="text/css" href="{{mix('css/app.css')}}">
    </head>
    <body>

        <div id="app">
            <app></app>
        </div>

        <script src="{{mix('js/app.js')}}"></script>
        <script src="{{mix('js/main.js')}}" async></script>

    </body>
</html>

我的App.vue

<template>
    <div class="root">
        <Header/>
        <router-view></router-view>
    </div>
</template>
<script>
    import Header from '@layout/Header';
    export default 
    {
        components: 
        {
            Header
        },

    }
</script>

我的Header.vue

<template>
    <header>
        <router-link :to="{name: 'home'}"> Home </router-link>
        <router-link :to="{name: 'test'}"> Teet </router-link>
    </header>
</template>

我的app.js

require('./bootstrap');

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from '@layout/App';
import {routes} from '@/routes';


Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes
});


const app = new Vue({
    el: '#app',
    router,
    // components: { App }
    render : h => h(App)
});

我的routes.js

import Home from '@views/Home';
import Test from '@views/Test';

export const routes = 
[
    {
        path: '/',
        name: 'home',
        component: Home
    },
    
    {
        path: '/test',
        name: 'test',
        component: Test
    },

]

我的webpack.mix.js

const mix = require('laravel-mix');


mix.webpackConfig({
    resolve: {
        extensions: [ '.js', '.vue' ],
        alias: {
            '@': path.resolve(__dirname, 'resources/js/'),
            '@layout': path.resolve(__dirname, 'resources/js/layout'),
            '@views': path.resolve(__dirname, 'resources/js/views'),
            '@assets': path.resolve(__dirname, 'resources/assets/')
        }
    }
});

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.copy('resources/assets/js/main.js', 'public/js/main.js');

如果你帮助我，我会很高兴。谢谢。

4

3 回答 3

1

嗯，我明白你想要什么。您想在所有组件中调用 JavaScript 文件。例如，init.js对于 JavaScript 插件，如 select2、datapicker 等......必须在所有组件中调用，我没听错吗？

反正

external.js#1在路径中创建一个文件resources/js/

external.js

function add_script(src) {
    if(document.querySelector("script[src='" + src + "']")){ return; }
    let script = document.createElement('script');
    script.setAttribute('src', src);
    script.setAttribute('type', 'text/javascript');
    document.body.appendChild(script)
}

function rem_script(src) {
    let el = document.querySelector("script[src='" + src + "']");
    if(el){ el.remove(); }
}

在你app.js添加

import {add_script, rem_script} from './external';

router.beforeEach((to, from, next) => {


  /* It would be nice to add a pre-loader here d
     so that the page design is not affecte
  */
  // Track your console :)
  console.log('Hi before load');
   
  // Add your script
  add_script('path/to/your_js');
  next()
})
router.afterEach(() => {
  // Here you can remove loader after loaded


  // Track your console :)
  console.log('Hi After load');


  // remove_included_js file but still working :)
  rem_script('path/to/your_js');    

})

path/to/your_js现在应该在每个组件中调用这个文件。

完成，就是这样：）

但我从来没有在大型项目上这样建议你:) 但正如@equi 和@Stefano A. 所说，他们是对的。

于 2021-01-22T02:45:32.727 回答
0

router-link允许JS在启用路由器的应用程序中导航Vue.js。这允许通过减少加载新页面所需的时间来优化用户体验。具体来说，新页面是异步注入到 DOM 中的。

为了达到您想要的结果，我们可以将我们希望在页面加载时运行的功能放入mounted()组件的方法中：

//component Test
<template>
    <div>
      <span> Test Page </span>
    </div>
</template>
<script>
export default 
{
   data() {
      return { }
   },
   mounted() {
      alert('Page loaded!'); // JS functionality to be run on component mount
   }
}
</script>

如果需要，我们可以在方法中加载一个外部.js文件mounted()：

mounted() {
    let newScript = document.createElement('script')
    newScript.setAttribute('src', 'https://<URL>/script.js')
    document.head.appendChild(newScript)
}
于 2021-01-21T01:12:10.553 回答
0

我没有看到它破裂。如果您考虑丢失警报消息：您可能会将其作为 created() 或 mounted() 生命周期钩子的一部分放在 App.vue 组件中。它只显示一次，因为 App.vue 组件保持加载状态，并且您正在使用路由器在 Test.vue 和 Home.vue 之间切换。App.vue 在刷新之前不会遍历其生命周期钩子。

但是，如果您想在每次路由更改时执行部分代码，则应在 vue 路由器上使用导航守卫。

于 2021-01-21T01:17:16.560 回答