Laravel-vuejsVue 路由器Javascript 在 onchange url

如何解决Laravel-vuejsVue 路由器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');

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

解决方法

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

无论如何

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

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

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

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