vue路由

vue路由

1.路由导航守卫

  to: Route: 即将要进入的目标 路由对象
  from: Route: 当前导航正要离开的路由
  在路由守卫中，只有next()是放行，其他的诸如：next(’/logon’) 、 next(to) 或者 next({ …to, replace: true })都不是放行，而是：中断当前导航，执行新的导航。可以这么理解：next() 是放行，但是如果next()里有参数的话，next()就像被重载一样，就有了不同的功能。

  下面这段代码意思是:如果页面要跳转的路径是signInfo或者signInfo-sub并且还没有登录过(即没有获取到token),就要跳转到登录页面获取token

router.beforeEach((to, from, next) => {　　 //获取token
        const hasToken = sessionStorage.getItem("Authorization");
        const loginPath = '/login'
        if ((to.path == '/signInfo' || to.path == '/signInfo-sub') && !hasToken) {
            next(loginPath)
        } else {
            next()
        }
    })

2.页面刷新回到页面顶部的方法

  在Vue项目中，访问过的页面，在滚动到某个位置后，再次刷新页面，页面仍处于上次访问过的位置。为了想页面回到顶部，只需要对路由进行修改，在router下index.js中：

export default new Router({
  routes: [{...}],
  scrollBehavior(to, from,savedPosition) {
    return {
      x: 0,
      y: 0
    }
  }
})