[Vuejs]-The loading bar doesn't show when using NuxtLink or RouterLink

If you are using a custom loading bar, you can manually control the loading bar at the appropriate position:

const start = () => {
  if (process.browser && window.$nuxt) {
    const {$loading} = window.$nuxt.$root;
    $loading.start && $loading.start();
  }
}

 const stop = (abort) => {
  if (process.browser && window.$nuxt) {
    const {$loading} = window.$nuxt.$root;
    $loading.finish && $loading.finish(abort);
  }
}

You should call the start method in the layout component or other reused place to display the loading bar.

For example, in my project, a custom loading animation needs to be displayed every time an http request is triggered, so I added the start method to the onRequest interceptor of axios.

export default function ({$axios}) {
  $axios.onRequest(config => {
    start()
    // ...
  })
  $axios.onResponse(response => {
    stop()
    // ...
  })
}