vue中的路由的那些事

一、导航守卫

1、全局守卫
router.beforeEach

image.png

router.beforeEach 很常用，比如验证用户的token等；

这里需要注意的是，一定要确保调用next方法，否则钩子不会被resolved

2、全局解析守卫
router.beforeresolve
在 2.5.0+ ，新增的全局解析守卫，和router.beforeEach 类似，区别是 同时在所有组件内守卫和异步路由被解析之后，解析守卫就被调用

3、全局后置钩子

router.afterEach((to,from)=>{
})

这里的钩子不会接受next函数 也不会改变导航本身

4、路由独享的守卫
我们可以在路由的配置文件index.js 上定义beforeEnter 守卫

image.png

这个比较常用，比如在用户进入组件前 验证他的权限、或者获取各个组件都需要用到的数据等

5、组件内的守卫
beforeRouteEnter、beforeRouteUpdate (2.2 新增--因为参数或者查询导致路由的改变不会触发 进入或者离开的导航守卫，所以新增了这个，当然也可以使用watch $route 对象来应对变化) 、 beforeRouteLeave

顾名思义，这三个是在组件中使用，其中beforeRouteLeave 比较实用，比如用户填写信息未完成要离开的时候 我们可以给他警告；

  export default {
    beforeRouteLeave(to, from, next) {
      if (confirm('你确定离开?')) {
        next(true)
      } else {
        next(false) // next 里的false表示 中断当前的导航 如果url改变了 就会重置到from路由对应的地址
      }
    },
}

二、路由懒加载技术

//官方写法
const app = () => import('@/components/app')
const router = new VueRouter({
  routes: [
    { path: '/app', component: app }
  ]
})
//  简写 
const router = new VueRouter({
  routes: [
    { path: '/app', component:  () => import('@/components/app')}
  ]
})

三、history模式注意事项

具体可见 vue项目二级路由刷新后样式丢失、错乱的解决方案及手机端实时访问npm run dev后的项目

四、vue 实现浏览器回退记忆位置的方法

一定要使用history 模式才能实现
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

 const router = new VueRouter({
   mode: 'history',
 scrollBehavior (to, from, savedPosition) {
     if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方
       return savedPosition
     } else {
       return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象
      }
     }，
   routes: [...]
 })