路由守卫（guard）
全局守卫：
在 router.index.js 文件中配置守卫函数，全局守卫指的是所有路由匹配都会经过它们，进行验证，判断是否可以去访问，（例如：登录、注册，只有登录才可以进入首页）
注意：
-
只要匹配一次路由，下面的全局守卫函数就会被调用
-
全局守卫函数必须在配置路由规则下面写。
一、全局前置钩子 router.beforeEach(fn)，导航被触发----一般登录验证
router.beforeEach(function(to,from,next){
// to,from路由信息对象
console.log("无论进入哪个路由（只要匹配一次路由），都要先调用这个函数")
console.log(to,from)
if(to.path=="/car"||to.path=="/info"){
//取出浏览器中缓存的登录信息
var str=window.localStorage.getItem("islogin")
//如果取出的信息是ok就代表用户已经登录过了，可以直接去car页面或info页面
//注意：这里与ok进行比较，是因为我们在登录页面进行了缓存，如果登录过，就缓存 一些信息
//缓存信息：window.localStorage.setItem("islogin","ok")
if(str=="ok"){
next()
}else{
//如果不符合规则，就代表用户并没有登录过
//就将页面跳转到登录页面
//让用户去登录
next("/login")
}
}else{
// 去匹配路由，然后加载组件
// 注意：最后一个用next(),不然容易导致死循环
next()
}
})
二、全局解析钩子 router.beforeResolve(fn)，组件初始化
// 全局解析守卫
// 作用：了解它什么时候触发
router.beforeResolve((to,from,next)=>{
console.log('路由匹配完毕',to,from)
// 渲染组件
next()
})
三、全局后置钩子 router.afterEach(fn) ，没有 next ，导航被确认,一般路由跳转以后用 window 把窗口调上去
// 全局后置守卫
// 作用：操作页面
router.afterEach((to, from) => {
console.log('组件已经渲染了',to,from)
// 滚动页面：是因为切换组件后，我们发现新页面的进度仍旧停留我们刚才页面进度的位置上。
// 这是因为切换组件只是dom操作更改了div标签，但是所有组件的切换都是同一份的html文件，
//所以body标签并没有改变，也就是每一个组件渲染的页面，鼠标在上面的位置都是一致的，
//例如滚动条，当我们页面滚动到页面的末尾，会发现切换组件后，滚动条依旧在页面的末尾处。
// 这种情况的出现会使用户的使用感很差
// 解决这个问题：window.scrollTo(0,0)：代表将页面滚动到页面头部。
window.scrollTo(0,0)
})
