Vue JS（router.beforeEach）无法将异常转换为字符串答案

【问题标题】：Vue JS (router.beforeEach) failed to convert exception to stringVue JS（router.beforeEach）无法将异常转换为字符串
【发布时间】：2019-03-25 14:02:29
【问题描述】：

我正在尝试将router.beforeEach 与localStorage 一起使用。如果localStorage有数据，我想跳过首页。如果没有数据，进入首页。我可以用console.log打印数据，但是路由器进程失败了

[vue-router] 路径导航期间未捕获的错误 > 失败将异常转换为字符串。

如何控制导航？

我的router.js：

Vue.use(Router);

const router = new Router({
    routes: [{
            path: '/',
            name: 'index',
            components: {
                default: Index,
                header: MainNavbar
            },
            props: {
                header: {
                    colorOnScroll: 400
                }
            }
        },
        {
            path: '/landing',
            name: 'landing',
            components: {
                default: Landing,
                header: MainNavbar,
                footer: MainFooter
            },
            props: {
                header: {
                    colorOnScroll: 400
                },
                footer: {
                    backgroundColor: 'black'
                }
            }
        },
        {
            path: '/login',
            name: 'login',
            components: {
                default: Login,
                header: MainNavbar
            },
            props: {
                header: {
                    colorOnScroll: 400
                }
            }
        },
        {
            path: '/profile',
            name: 'profile',
            components: {
                default: Profile,
                header: MainNavbar,
                footer: MainFooter
            },
            props: {
                header: {
                    colorOnScroll: 400
                },
                footer: {
                    backgroundColor: 'black'
                }
            }
        }
    ],
    scrollBehavior: to => {
        if (to.hash) {
            return {
                selector: to.hash
            };
        } else {
            return {
                x: 0,
                y: 0
            };
        }
    }
});

router.beforeEach((to, from, next) => {
    let adres = JSON.parse(localStorage.getItem('adres'));
    if (!adres) {
        next('/');
    } else {
        next('/login');
    }
});

export default router;

本地数据示例：

{  
   "id":1,
   "adi":"Demo",
   "soyadi":"Sef",
   "telefon":"05322375277",
   "adres":"Girne Mahallesi 6022 Sk. No:22 Kahta/Adıyaman",
   "fotograf":"http://localhost:8000/media/kullanici/sef/demosef/chef-1.jpg"
}

【问题讨论】：

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

【解决方案1】：

您正在创建一个无限循环，您的beforeEach 守卫会被一遍又一遍地触发。在beforeEach 中，它检查localStorage 中是否有地址并重定向到/ 或/login。然后在您输入新路由之前再次调用 beforeEach 并检查是否有地址并重定向。该过程无限重复。您需要在beforeEach 守卫中的某处不带任何参数地调用next() 以确认正常导航。所以你可能想做这样的事情..

router.beforeEach((to, from, next) => {
  if (to.path == '/') {  // If we are entering the homepage.
    let adres = JSON.parse(localStorage.getItem('adres'));
    if (!adres) {
      next();
    } else {
      next('/login');
    }
  } else {  // Not entering the homepage. Proceed as normal.
    next()
  }
});

【讨论】：