最近想通过实现一个登陆跳转的例子来加强对vue-router和vuex的理解
通过对vue-router官方文档的学习,router.beforeEach可以实现,然后凭借自己的理解直接写出了下列代码:
router.beforeEach((to, from, next) => {
if (isLogin) {
next()
} else {
next('/login')
}
})
通过isLogin这个字段来判断是否登录了,登录了的话就不作处理,没有登录的话就跳转到登陆页面,自己感觉十分正确但是执行的时候却出现了死循环问题。
next()和next('/login')是不一样的,next()不会再次执行beforeEach方法,但是next('/login')会再次执行,所以上述代码就陷入了判断-跳转-判断-跳转......的无限循环中。
router.beforeEach((to, from, next) => {
if (isLogin) {
next()
} else {
if (to.path === '/login') {
next()
} else {
next({ path: '/login', replace: true })
}
}
})
通过加了一层判断,这段代码的执行逻辑就变成了判断-跳转(跳转到了'/login'页面)-判断(这次判断的是跳转路径而不是是否登录)-放行(自己的理解),这样就解决了死循环问题。
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}