title: Laravel-vuejs (Vue Router) Javascript not working in onchange url
body: <p>In my project, when I move from page to page with<code>&lt;router-link&gt;</code>, JavaScript does not work, look at the image to understand what I mean.</p>
  <p><a href="https://i.stack.imgur.com/l1vg3.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l1vg3.gif" alt="enter image description here" /></a></p>
  <p>The first time when I refresh the page, everything works, but when I go, for example, to the test page (from <code>localhost:8000/</code> to <code>localhost:8000/test</code>) ,javascript doesn't work, anyone help me?</p>
  <p>my <code>app.blade.php</code></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Vue App&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;{{mix('css/app.css')}}&quot;&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id=&quot;app&quot;&gt;
              &lt;app&gt;&lt;/app&gt;
          &lt;/div&gt;
  
          &lt;script src=&quot;{{mix('js/app.js')}}&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;{{mix('js/main.js')}}&quot; async&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>my <code>App.vue</code></p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;root&quot;&gt;
          &lt;Header/&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import Header from '@layout/Header';
      export default 
      {
          components: 
          {
              Header
          },
  
      }
  &lt;/script&gt;
  </code></pre>
  <p>my <code>Header.vue</code></p>
  <pre><code>&lt;template&gt;
      &lt;header&gt;
          &lt;router-link :to=&quot;{name: 'home'}&quot;&gt; Home &lt;/router-link&gt;
          &lt;router-link :to=&quot;{name: 'test'}&quot;&gt; Teet &lt;/router-link&gt;
      &lt;/header&gt;
  &lt;/template&gt;
  </code></pre>
  <p>my <code>app.js</code></p>
  <pre><code>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 =&gt; h(App)
  });
  </code></pre>
  <p>my <code>routes.js</code></p>
  <pre><code>import Home from '@views/Home';
  import Test from '@views/Test';
  
  export const routes = 
  [
      {
          path: '/',
          name: 'home',
          component: Home
      },
      
      {
          path: '/test',
          name: 'test',
          component: Test
      },
  
  ]
  </code></pre>
  <p>my <code>webpack.mix.js</code></p>
  <pre><code>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');
  </code></pre>
  <p>I will be very happy if you help me. Thanks.</p>