Question

我的Vuejs代码有问题！

我有一个Vuejs应用程序，其中安装了Vue-router和Vuex！我已经配置了路由器，并且在商店中有一些操作，这些操作使我可以从PHP API中提取数据。

问题是我需要做一些事情（检查localStorage中是否存在Xhr令牌，请使用商店分派方法执行xhr查询以加载与用户相关的数据，否则什么都不做）< em>仅当用户重新加载页面时，否则，如果用户使用Vue-router系统在页面之间切换，则不应发送任何请求。

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

然后我尝试使用 vuejs created（）钩子！它允许发出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()以便在完全提取数据之前什么也不会加载？

App.vue中的BeforeRouteEnter函数

1 个答案: