VueRouter 甚至在调用 Vue.beforeCreate 函数之前就改变了路由答案

【问题标题】：VueRouter is changing the route even before calling Vue.beforeCreate functionVueRouter 甚至在调用 Vue.beforeCreate 函数之前就改变了路由
【发布时间】：2018-03-03 17:17:35
【问题描述】：

我是 vue.js 的新手，在初始化路由器时遇到问题。

当用户点击“/”时，如果用户已经登录，我想重定向到“/home”，否则将他重定向到“/login”。成功登录后，我将访问令牌保存在 localStorage 中。每当用户重新访问该页面时，我都会从 localStorage 获取令牌并在我的 vuex 存储中进行设置并相应地重定向他。

但问题是即使用户已经登录，它总是重定向到“/登录”页面。在将令牌设置为存储之前，对路由器的调用正在执行。

下面是我的代码。请告诉我如何解决这个问题。

//main.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import App from './App';
import { store } from './store';
import router from './router';

Vue.use(Vuetify);
Vue.config.productionTip = false;


/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App },
  beforeCreate () {
    const token = localStorage.getItem('userToken');
    this.$store.dispatch('autoSignInToken', token);
  }
});

//router.js
import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/User/Login';
import Hello from '@/components/Hello';
import AuthGuard from './auth-guard'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      redirect: '/home',
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
      beforeEnter: AuthGuard
    },
    {
      path: '/home',
      name: 'Home',
      component: Hello,
      beforeEnter: AuthGuard,
    },
  ],
});

//auth-guard.js
import {store} from '../store'

export default (to, from, next) => {
  if (store.getters.user) {
    if(to.fullPath === '/login') {
      next('/home');
    } else {
      next();
    }
  } else {
    if(to.fullPath !== '/login') {
      next('/login');
    } else {
      next();
    }
  }
}

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

好吧，您根本没有理由必须在beforeCreate 中添加令牌，是吗？你根本不访问 Vue 实例，你只使用 localStorage 和 store。

所以在你创建路由器之前就做吧。

const token = localStorage.getItem('userToken');
store.dispatch('autoSignInToken', token);

export default new Router({
  routes: [
  // ...

【讨论】：

谢谢..没想到..效果很好。