美文网首页
router(守卫:跳转之前router.beforeEach;

router(守卫:跳转之前router.beforeEach;

作者: 小棋子js | 来源:发表于2019-11-15 09:45 被阅读0次

作用:跳转前进行判断拦截。

// 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

相关文章

  • router(守卫:跳转之前router.beforeEach;

    作用:跳转前进行判断拦截。 vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

  • vue中的路由的那些事

    一、导航守卫 1、全局守卫router.beforeEach router.beforeEach 很常用,比如验证...

  • vue router和vue属性

    vue router 安装 全局前置守卫 router.beforeEach 每个守卫方法接收三个参数: to: ...

  • vue 中挂载路由导航守卫

    /* 挂载路由导航守卫 */ router.beforeEach((to, from, next) => { /*...

  • Vue设置路由拦截

    路由守卫 在Vue中分为全局前置守卫 router.beforeEach ,和全局后置钩子 router.afte...

  • vue-router

    vue-router 有哪些钩子函数? 全局前置守卫 router.beforeEach 全局解析守卫 route...

  • 华云

    一,vue路由守卫的生命周期1,全局的前置路由守卫 router.beforeEach()2, 全局解析守卫 ...

  • Vue2.0系列(八)vue-router高阶

    一、导航守卫 1.1、全局守卫 router.beforeEach 注册一个全局前置守卫: 当一个导航触发时,全局...

  • vue 导航守卫

    1、全局守卫 router.beforeEach全局前置守卫 next: Function:一定要调用该方法来 r...

  • Vue练手项目(四):登录页

    一.在main.js使用导航守卫(router.beforeEach)进行身份验证 导航守卫相关介绍添加代码如下:...

网友评论

      本文标题:router(守卫:跳转之前router.beforeEach;

      本文链接:https://www.haomeiwen.com/subject/jsgfvctx.html