一.路由模式

Hash模式

• 链接地址会带#号
• Hash路由是根据监听链接后面#号的变化，触发onhashchange事件，来改变window.history的前进后退，不会触发页面的刷新（不会发起http请求）。
• 不利于SEO。

History模式

• 根据H5提供的新特性history的history.pushState()和history.replaceState()来添加/修改历史记录栈，不会触发http请求。浏览器的前进、后退操作会触发window.onpopstate来改变路由状态。
• 当页面跳转后，再刷新，会出现404的问题，需要nginx配置页面重定向规则。

二. 路由守卫

全局守卫

//进入路由之前
router.beforeEach((to,from,next)=>{
//用户登录权限守卫
    if(!login){next({name:'login'})}
    else next()
})

//进入路由之后
router.afterEach((to,from)=>{

})

//全局解析守卫
router.beforeResolve((to,from,next)=>{

})

路由独享守卫

    //进入路由之前
   beforeEnter(to,from,next){
       
   }

组件守卫

    //进入之前，不能获取组件实例，可以通过next获取
    beforeRouteEnter(to,from,next){
        next(vm=>{
            console.log(vm)
        })
    }
    
    //同页面，通过/foo/:id，跳转的时候会触发
    beforeRouteUpdate(to,from,next){
    }
    
    //离开当前路由时调用
    beforeRouteLeave(to,from,next){}
    

希望有大佬补充一下，守卫的使用场景