Vue JS(router.beforeEach)未能将异常转换为字符串

Question

我正在尝试将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"
}

Answer 1

你正在创建一个无限循环，你的beforeEach守卫被一遍又一遍地触发。在beforeEach中，它会检查本地存储中是否有地址，并重定向到/或/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()
}
});