javascript - App.vue 中的 BeforeRouteEnter 函数

Question

我的 Vuejs 代码有问题!

我有一个 Vuejs 应用程序，其中安装了 Vue-router 和 Vuex!我已经配置了路由器，并且我的商店中有允许我从 PHP API 提取数据的操作。

问题是我需要做一些事情(检查 localStorage 中是否存在 Xhr token ，使用存储调度方法执行 xhr 查询以加载用户相关数据，否则不执行任何操作)< em>仅当用户重新加载页面时，否则如果用户使用 Vue-router 系统从一个页面转到另一个页面，则不应发送请求。

为此，我想在我的 App.Vue 组件中使用 VueRouter BeforeRouteEnter 。但问题是它在 App.Vue 中不起作用(我不明白为什么)，但在与路由相关的其他组件中起作用。

然后我尝试使用vuejs create() Hook !它允许发出 xhr 请求，但由于这些请求是异步的，因此页面会在数据尚未到达时加载，从而导致错误。

我的App.Vue

<template>
  <div id="app" class="uk-offcanvas-content">
    <div v-if="!loading">
      <activation-alert v-if="authCheck && !activated && !arr.includes($route.name)"/>
      <navbar v-if="!isMobile"/>
      <mobile-navbar v-if="isMobile"/>
      <vue-progress-bar> </vue-progress-bar>
      <router-view />
      <off-canvas v-if="!isMobile"/>
    </div>
    <div v-else>
      <overlay-loader/>
    </div>
  </div>
</template>

<script>
import store from './store/index'
import Navbar from '@/components/Utils/Navbar/Navbar'
import MobileNavbar from './components/Mobile/Navbar'
import OffCanvas from '@/components/Utils/Navbar/OffCanvas'
import ActivationAlert from '@/components/Auth/Activation-Alert'
import OverlayLoader from '@/components/Utils/OverlayLoader'
import {mapGetters} from 'vuex'
import DeviceInformation from './Classes/DeviceInformation'

let app = {
  name: 'App',
  store,
  data () {
    return {
      arr: ['login', 'register', 'forgot-password',
        'change-password', 'blocked', 'activation'],
      loading: false
    }
  },
  components: {
    Navbar,
    OffCanvas,
    ActivationAlert,
    OverlayLoader,
    MobileNavbar
  },
  computed: {
    ...mapGetters(['activated', 'authCheck', 'isMobile'])
  },
  beforeRouteEnter (to, from, next) {
    console.log(to, from, next) // no output
  },
  mounted () {
    (new DeviceInformation(this)).load()
    this.$Progress.finish()
    global.vm = this
  },
  created () {
    let token = window.localStorage.getItem('xhrToken')
    if (typeof token !== 'undefined' && token !== null) {
      store.dispatch('setUserIfAuthenticated')
        .then(() => { this.loading = false })
    } else {
      store.dispatch('notAuth')
        .then(() => { this.loading = false })
    }

    this.$Progress.start()
    this.$router.beforeEach((to, from, next) => {
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        this.$Progress.parseMeta(meta)
      }
      this.$Progress.start()
      next()
    })
    this.$router.afterEach((to, from) => {
      this.$Progress.finish()
    })
  }
}
export default app
</script>

<style scoped>
  @import "../node_modules/semantic-ui-dimmer/dimmer.css";
</style>

** 我的路由器 **

import Vue from 'vue'
import Router from 'vue-router'
import Register from '../components/Auth/Register'
import Login from '../components/Auth/Login'
import Home from '../components/Home/Home'
import Test from '../components/Test'
import Blocked from '../components/Auth/Blocked'
import Profile from '../components/Auth/Profile/Profile'
import Activation from '../components/Auth/Activation'
import ForgotPassword from '../components/Auth/ChangePassword/ForgotPassword'
import ChangePassword from '../components/Auth/ChangePassword/ChangePassword'
import JustRegisteredSteps from '../components/Auth/JustRegisteredSteps'
import {auth, guest} from '../services/middleware'

Vue.use(Router)

let router = new Router({
  mode: 'history',
  saveScrollPosition: true,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    },
    {
      path: '/register',
      name: 'register',
      component: Register,
      beforeEnter: guest
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      beforeEnter: guest
    },
    {
      path: '/blocked',
      name: 'blocked',
      component: Blocked,
      beforeEnter: guest
    },
    {
      path: '/forgot-password',
      name: 'forgot-password',
      component: ForgotPassword,
      beforeEnter: guest
    },
    {
      path: '/password/reset/:token',
      name: 'change-password',
      component: ChangePassword,
      beforeEnter: guest
    },
    {
      path: '/profile/:page?',
      name: 'profile',
      component: Profile,
      beforeEnter: auth
    },
    {
      path: '/activation/:action',
      name: 'activation',
      component: Activation,
      beforeEnter: auth
    },
    {
      path: '/set-profile',
      name: 'just-registered-steps',
      component: JustRegisteredSteps,
      beforeEnter: auth
    }
  ]
})

router.options.routes.forEach(function (el) {
  el['meta'] = {
    progress: {
      func: [
        {call: 'color', modifier: 'temp', argument: '#ffb000'},
        {call: 'fail', modifier: 'temp', argument: '#6e0000'},
        {call: 'location', modifier: 'temp', argument: 'top'},
        {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
      ]
    }
  }
})
export default router

Answer 1

为什么不创建async created()，以便在数据完全获取之前不会加载任何内容？