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

Question

在我的项目中，当我使用 <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');

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

Answer 1

router-link 允许在启用路由器的 Vue.js 应用程序中 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>

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

mounted() {
    let newScript = document.createElement('script')
    newScript.setAttribute('src', 'https://<URL>/script.js')
    document.head.appendChild(newScript)
}

Answer 2

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

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

Answer 3

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

随便

#1 在路径 resources/js/

中创建文件 external.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 所说，他们是对的。

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

Laravel-vuejs (Vue Router) Javascript not working in onchange url

laravel

vue.js

vue-component

vue-router

laravel-vue