Vue-router: Using component method within the router

Question

My first Vue project and I want to run a loading effect on every router call. I made a Loading component:

<template>
    <b-loading :is-full-page="isFullPage" :active.sync="isLoading" :can-cancel="true"></b-loading>
</template>

<script>
    export default {
        data() {
            return {
                isLoading: false,
                isFullPage: true
            }
        },
        methods: {
            openLoading() {
                this.isLoading = true
                setTimeout(() => {
                    this.isLoading = false
                }, 10 * 1000)
            }
        }
    }
</script>

And I wanted to place inside the router like this:

router.beforeEach((to, from, next) => {
    if (to.name) {
        Loading.openLoading()
    }
    next()
}

But I got this error:

TypeError: "_components_includes_Loading__WEBPACK_IMPORTED_MODULE_9__.default.openLoading is not a function"

What should I do?

Andrew Vasylchuk · Accepted Answer · 2019-08-18 08:30:32Z

2

Vuex is a good point. But for simplicity you can watch $route in your component, and show your loader when the $route changed, like this:

...
watch: {
  '$route'() {
     this.openLoading()
   },
},
...

I think it's fast and short solution.

answered Aug 18, 2019 at 8:30

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Feralheart Over a year ago

I placed watch in the component, but nothing happened

Andrew Vasylchuk Over a year ago

Does this watch method invoke? Can you put console.log() in it?

Andrew Vasylchuk Over a year ago

You component should alway be render in DOM (don't apply v-if) on it.

Feralheart Over a year ago

I replaced the component to the main componed and now it works 'til infinity. How can I watch if in the background everything is loaded?

Andrew Vasylchuk Over a year ago

What do you mean by everything is loaded? When does this event happen?

|

Abdelillah Aissani · Accepted Answer · 2019-08-19 08:48:24Z

0

I don't think you can access a component method inside a navigation guard (beforeEach) i would suggest using Vuex which is a vue plugin for data management and then making isLoading a global variable so before each route navigation you would do the same ... here is how you can do it :

Of course you need to install Vuex first with npm i vuex ... after that :

on your main file where you are initializing your Vue instance :

import Vue from 'vue'
import Vuex from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isLoading: false,
  },
  mutations: {
    openLoading(state) {
      state.isLoading = true
      setTimeout(() => {
        state.isLoading = false
      }, 10000)
    },
  },
})
// if your router is on a separated file just export the store and import it there
const router = new VueRouter({
  routes: [
    {
      // ...
    },
  ],
})

router.beforeEach((to, from, next) => {
  if (to.name) {
    store.commit('openLoading')
  }
  next()
})

new Vue({
   /// ....
   router,
   store,
})

In your component:

<b-loading :is-full-page="isFullPage" :active.sync="$store.state.isLoading" :can-cancel="true"></b-loading>

edited Aug 19, 2019 at 8:48

answered Aug 17, 2019 at 19:07

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

3 Comments

Andrew Vasylchuk Over a year ago

Using Vuex is a good point. But you answer has an error in this line :active.sync="$store.state.isLoading". You will get Vuex warn because you can't mutate store directly, is suggest you to rewrite it using getter and setter.

Abdelillah Aissani Over a year ago

Hi thanks but im not mutating the value there its just bidden ( not ´v-model´) and yes using a getter is better ofc .... Your solution is much better i guess you just need to include the condition that he is implemeting

Andrew Vasylchuk Over a year ago

Potentially, he is modifying it directly in component, because he added .sync modifier, which allows props changing.

Collectives™ on Stack Overflow

Vue-router: Using component method within the router

2 Answers 2

9 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related