时间戳

首页 > 解决方案 > Laravel-vuejs（Vue 路由器）Javascript 在 onchange url 中不起作用

laravel - Laravel-vuejs（Vue 路由器）Javascript 在 onchange url 中不起作用

问题描述

在我的项目中，当我从一个页面移动到另一个页面时<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');

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

标签： laravelvue.jsvue-componentvue-routerlaravel-vue

解决方案

嗯，我明白你想要什么。您想在所有组件中调用 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. 所说，他们是对的。

推荐阅读