Question

我不了解我的vue-router行为...

在浏览器中，显示主页时，我单击工具栏中的/ users链接 / users页面显示正确。但是，如果我尝试重新加载此/ users页面（单击“重新加载浏览器”按钮...当前为Chrome），然后..

/ users页面被重新显示并在/ home页面被放开后立即显示...如路由器中的控制台日志中所示。beforeEach（）函数

ROUTER BEFORE to:  {name: "Users", meta: {…}, path: "/users", hash: "", query: {…}, …}
ROUTER non protected page:  {name: "Users", meta: {…}, path: "/users", hash: "", query: {…}, …}
ROUTER BEFORE to:  {name: "Home", meta: {…}, path: "/home", hash: "", query: {…}, …}
ROUTER non protected page:  {name: "Home", meta: {…}, path: "/home", hash: "", query: {…}, …}

这种奇怪行为的原因可能是什么？

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Firebase from 'firebase'
import Home from '@/views/Home.vue'

Vue.use(VueRouter)

function loadView (view) {
  return () => import((/* webpackChunkName: 'view-[request]' */ `@/views/${view}.vue`))
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/users',
      name: 'Users',
      component: loadView('Users')
    }
    ...
    {
      path: '/',
      component: Home
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log('ROUTER BEFORE to: ', to)
  if (to.matched.some(record => record.meta.requiresAuth)) {
    console.log('ROUTER protected page: ', to)
    if (!Firebase.auth().currentUser) {
      console.log('ROUTER user not authenticated')
      next({ path: '/users', query: { redirect: to.fullPath } })
    } else {
      console.log('ROUTER user authenticated')
      next()
    }
  } else {
    console.log('ROUTER non protected page: ', to)
    next()
  }
})

export default router

Answer 1

这是我的firebase.auth（）。onAuthStateChanged（（user））函数的附带作用。

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.$router.push('/member')
      } else {
        this.$router.push('/home')
      }
    })

我应该写：

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.$router.push('/member')
  } else {
    this.$router.push('/users')
  }
})

每当我重新加载当前页面时都会调用此函数...

Vue.js Vue-router在浏览器重新加载页面上的怪异行为

1 个答案: