手动输入时Vue2路由器不起作用答案

【问题标题】：Vue2 router do not work when type manually手动输入时Vue2路由器不起作用
【发布时间】：2017-06-12 07:28:50
【问题描述】：

我有这样的代码：

created: function() {
    if(!localStorage.hasOwnProperty('auth_token')) {
        router.replace({name: 'login'});
    } else {
         if(router.history.current.name == 'login') {
             router.push({name: 'allVideos'});
         }
    }
}

在我的 Vue 根实例中。

因此，当页面加载时，它会检查令牌。当我没有令牌时，我将重定向到登录页面。如果我在登录页面上有一个令牌重定向到 allVideos，或者在其他页面上根本不重定向。

当我进行刷新时，一切工作正常，通过一些按钮等。但是当我手动输入 /#/login 并按 enter Vue 渲染登录页面但 auth_token 存在。而且当我手动输入时，它根本不会到达created 方法。当我再次从登录页面输入 /#/login 时，它再次开始工作....有什么想法吗？？？谢谢

更新：我尝试使用导航守卫

router.beforeEach((to, from, next) => {
    if(localStorage.hasOwnProperty('auth_token')) {
        if(to.name == 'login') {
            next({name: 'allVideos'});
        }
    } else {
        if(to.name != 'login') {
            next({path: '/login'});
        }
    }
        next();

});

现在代码对我来说更干净了，但是当我手动输入时问题仍然存在

【问题讨论】：

我认为这个概念不在这里。我认为你应该使用一些导航守卫，而不是把这些东西放到实例中，在你的情况下 router.beforeEach 应该可以解决问题 router.vuejs.org/en/advanced/navigation-guards.html
你的意思是我应该使用beforeEach钩子而不是将这样的代码添加到created方法？会检查的，暂时不要阅读。谢谢！
是的，在这里查看这个例子github.com/TahaSh/spa-forum/blob/master/resources/assets/js/… - （注意这是 Vue 1 和旧路由器代码，但它可以帮助你） beforeEach 不是生命周期钩子，它是来自路由器实例的导航保护。跨度>

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

在您的代码中，next() 被调用了 2 次，因此会产生问题。你可以试试这段代码：

router.beforeEach((to, from, next) => {
  if(localStorage.hasOwnProperty('auth_token')) {
    if(to.name === 'login') {
      next({name: 'allVideos'});
    }
  } else if(to.name !== 'login') {
    next({path: '/login'})
  } else {
    next();
  }
});

【讨论】：