Vue JS (router.beforeEach) 无法将异常转换为字符串
Vue JS (router.beforeEach) failed to convert exception to string
我正在尝试将 router.beforeEach
与 localStorage
一起使用。如果localStorage
里面有数据,我想跳过首页。如果没有数据,进入首页。我可以使用 console.log
打印数据,但路由器进程失败
[vue-router] uncaught error during route navigation > failed to
convert exception to string.
如何控制导航?
我的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"
}
你正在创建一个无限循环,你的 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()
}
});
我正在尝试将 router.beforeEach
与 localStorage
一起使用。如果localStorage
里面有数据,我想跳过首页。如果没有数据,进入首页。我可以使用 console.log
打印数据,但路由器进程失败
[vue-router] uncaught error during route navigation > failed to convert exception to string.
如何控制导航?
我的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"
}
你正在创建一个无限循环,你的 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()
}
});