时间戳

首页 > 解决方案 > 浏览器重新加载页面上的 Vue.js Vue-router 奇怪行为

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

问题描述

我不明白我的 vue-router 行为......

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

/users 页面在 /home 页面显示后立即重新显示...如我的 router.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: {…}, …}

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

路由器.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

标签： vue.jsvue-router

解决方案

这是我的 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')
  }
})

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

推荐阅读