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

Question

我有这样的代码：

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 并按回车键时，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();

});

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

Answer 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();
  }
});

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

Vue2 router do not work when type manually

javascript

vue.js

vue-router

vue-component

vuejs2