Vue-router：在路由器中使用组件方法

Question

我的第一个 Vue 项目，我想在每个路由器调用上运行加载效果。 我做了一个Loading 组件：

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

我想像这样放置在路由器内部：

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

但是我收到了这个错误：

TypeError：“_components_includes_Loading__WEBPACK_IMPORTED_MODULE_9__.default.openLoading 不是函数”

我该怎么办？

Answer 1

Vuex 是个好点。但为简单起见，您可以在组件中查看$route，并在$route 更改时显示您的加载器，如下所示：

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

我认为这是快速而简短的解决方案。

Answer 2

我认为你不能访问导航守卫 (beforeEach) 中的组件方法，我建议使用 Vuex 这是一个用于数据管理的 vue 插件，然后将 isLoading 设为全局变量，因此在每个之前路线导航你会做同样的事情......这是你可以做到的：

当然你需要先安装Vuex 和npm i vuex ...然后：

在您初始化 Vue 实例的主文件中：

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

在您的组件中：

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