作用:跳转前进行判断拦截。
// meta.requiresAuth添加该字段,表示进入这个路由是需要登录的
function requiresAuth(to,next){
if (to.matched.some(record => record.meta.requiresAuth)) { // 判断该路由是否需要登录权限
next({
path: '/login',
query: {
redirect: to.fullPath
}
})
} else {
next()//进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
}
}
router.beforeEach((to, from, next) => {
let isLogin = store.state.user.isLogin;
if (isLogin) {
next()
} else {
if (isLogin === null) {
store.dispatch('user/getLoginStatus').then(isLogin => {
if (isLogin) {
next()
} else {
requiresAuth(to,next)
}
}).catch(()=>{
requiresAuth(to, next)
})
} else {
requiresAuth(to,next)
}
}
});
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
网上查了一下,很多网友说可以试试在main.js入口文件配合vue-router写下面这个:
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});
或者:
//路由跳转后,页面回到顶部
router.afterEach(()=>{
document.body.scrollTop =0;
document.documentElement.scrollTop =0;
})
再另一种方法:
const router = new Router({
mode: 'history',
routes,
scrollBehavior(to, from, savedPosition) {
return {
x: 0,
y: 0
}
}
})
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach((to, from) => {
NProgress.done()
})
export default router
网友评论