vue的滚动行为与元信息

vue-router

滚动行为

前端路由并没有重载整个浏览器，只是通过 DOM 进行了局部更新。所以，有的时候，浏览器的一只状态会被保持，比如 滚动条，当我们在一个页面中滚动滚动条，然后跳转到另外一个页面，滚动条会保持在上一个页面中，我们其实更希望滚动条能回到页面顶部，就像重载了整个页面一样

const router = new VueRouter({
  routes: [...],
  scrollBehavior: () => ({ y: 0 })
});

后退/前进

正对 后退/前进 行为，会提供一个 savedPosition 参数，通过该参数返回历史记录中的滚动值

scrollBehavior (to, from, savedPosition) {
  // console.log(savedPosition)
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

路由元信息

定义路由的时候可以配置 meta 字段

通过 meta 定义要验证的路由

const router = new Router({
  routes: [
    {
      path: '/user',
      component: User,
      children: [
        {
          path: '',
          name: 'user',
          component: Profile,
          meta: { requiresAuth: true }
        },
        {
          path: 'cart',
          name: 'user-cart',
          component: Cart,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

const isLogin = true;

router.beforeEach((to, from, next) => {
  NProgress.start()

  if (to.meta.requiresAuth && !isLogin) {
      next({
        name: 'login',
      })
  } else {
    next()
  }
  
})

或者

const router = new Router({
  routes: [
    {
      path: '/user',
      component: User,
      meta: { requiresAuth: true }
      children: [
        {
          path: '',
          name: 'user',
          component: Profile
        },
        {
          path: 'cart',
          name: 'user-cart',
          component: Cart
        }
      ]
    }
  ]
})

const isLogin = true;

router.beforeEach((to, from, next) => {
  NProgress.start()

  if (to.matched.some(record => record.meta.requiresAuth) && !isLogin) {
      next({
        name: 'login',
      })
  } else {
    next()
  }
  
})