在没有登录的情况下开发者有可能会不让用户看到某些或者进入某些页面,vue 跳转使用的是vue-roter跳转。
使用vue-router的beforeEach函数接受三个参数to, from, next分别是to:去的页面、from:来自那个页面、next:定向到哪里
beforeEach需要写到vue实例前。
本文仅供参考学习用途,如有错误望指出改正。
//首先登录成功之后需要存一个状态到本地 这个状态可以是自己设置也可以配合后台来操作
router.
beforeEach((
to,
from,
next)
=> {
//获取到登录状态
const loginStuts
= sessionStorage.
getItem(
'loginStuts')
//如果登录状态不存在或者去的页面是某个用户没登录不能去的页面
//(
to.path的意思为去往的 路径是/
myinformation也可不写)
//就跳转到login页面也就是登录界面
//next函数不传参数即是验证通过去往该页面 传入参数即是调往参数页面
if (
!loginStuts
&& to.path
==
'/myinformation') {
next(
'/login')
}
else {
next()
}
})
/* eslint-disable no-new */
new
Vue({
el:
'#app',
router,
components: { App },
template:
'<App/>',
store
})