router.push () не перезагружает представление маршрутизатора в VUE

Question

У меня есть простая система аутентификации для моего приложения. После ввода правильного имени пользователя и пароля мне нужно перенаправить просмотр маршрутизатора.

К сожалению, когда я звоню router.push("/"), ничего не происходит. Затем мне нужно снова нажать кнопку «Войти» или страницу перезагрузки вручную или использовать router.go().

. Я не могу перезагрузить всю страницу после входа в систему, мне нужно обновить только router-view.

Iискал много вопросов, но я не нашел ответа.

У вас есть идеи, что случилось?

//router.rs
import Vue from "vue";
import Router from "vue-router";
import Home from "../views/Home.vue";
import LoginPage from "../views/LoginPage.vue";

Vue.use(Router);

export const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [{
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/login",
      name: "login",
      component: LoginPage
    },
    {
      path: "/about",
      name: "about",
      component: () => import("../views/About.vue")
    },
    {
      path: "*",
      redirect: "/"
    }
  ]
});

router.beforeEach((to, from, next) => {
  const publicPages = ["/login"];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem("user");

  if (authRequired && !loggedIn) {
    next("/login");
  } else {
    next();
  }
});

// fragment of LoginPage.vue
import { userService } from "../services";
export default {
  components: {},
  data() {
    return {
      username: "",
      password: "",
      submitted: false
    };
  },
  computed: {
    loggingIn() {
      // return this.$store.state.authentication.status.loggingIn;
    },
    alert() {
      return this.$store.state.alert;
    }
  },
  created() {
    // reset login status
    userService.logout();
  },
  methods: {
    handleSubmit() {
      this.submitted = true;
      if (this.username && this.password) {
        userService.login(this.username, this.password).then(
          ok => {
            this.$router.push({ path: "/" }, () => {});
          },
          e => {
            console.log(e);
          }
        );
      }
    }
  }
};

Answer 1

Интересная вещь: Здесь мы можем найти реализацию beforeEach, и я использовал их. И это не решает мою проблему.

Я переместил последнюю next() форму еще в ond labmda, и она работает.

// fragmet from docs
router.beforeEach((to, from, next) => {
  if (...) {
    // this was unnecessary for this explanation
  } else {
    next() // make sure to always call next()!
  }
})

// fragmet from my code
router.beforeEach((to, from, next) => {
  if (...) {
    // this was unnecessary for this explanation
  }
  // I removed `else` node for last `next()` call
  next() // make sure to always call next()!
})

В любом случае, скажите, пожалуйста, почемуэто не имеет значения, когда next находится в else ...