路由守卫

路由守卫的作用：对路由进行权限控制

全局前置守卫

初始化的时候被调用

每次路由切换之前被调用

/*
  router.beforeEach((to,from,next)=>{})
    to: 即将进入的路由对象
    from：即将离开的路由对象
    next：向下运行（符合规则，就让你向下执行）
*/

router.beforeEach((to, from, next) => {
  if (to.path == '/cart') {
    let token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      setTimeout(() => {
        next('/user')
      }, 1000)
    }
    return;
  }
  next()
})

路由独享守卫

某一个路由所独享的，直接在路由配置上定义 beforeEnter

适用于对权限划分

只在进入路由时触发，不会在 params、query 或 hash 改变时触发

/*
	beforeEnter(to,from.next){}
		to: 即将进入的路由对象
    from：即将离开的路由对象
    next：向下运行（符合规则，就让你向下执行）
*/
{
  path:"/move",
  component:Move,
  beforeEnter(to,from,next){
    // 业务逻辑
  }
}

组件内部守卫

beforeRoutrEnter 通过路由规则进入该组件时被调用

beforeRouteUpdate 组件路由动态更新触发【tab栏切换】

beforeRouteLeave 通过路由规则离开该组件时被调用

/*
	beforeRoutrEnter(to,from,next){
		// 在组件实例被创建之前执行（在beforeCreate生命周期函数之前执行）
		// 不能获取组件实例 `this` 因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
	}
	
	beforeRouteUpdate(to,from,next){
		// 当前组件路由动态更新时触发
		// 举例：对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
		// 由于会渲染同样的 Foo组件，因此组件实例会被复用。而这个钩子函数就会在这个情况下被调用
		// 可以访问组件实例 `this`
	}
	
	beforeRouteLeave(to,from,next){
		// 离开当前组件对应的路由时触发
		// 可以访问组件实例 `this`
		// 这个离开守卫 通常用来预防用户在还未保存修改前突然离开。
		// 该导航可以通过返回 `false` 来取消。
	}
*/

// 写在单页面组件中（.vue的文件）
// 只有在home页面可以访问这个公共的组件，其他的页面不允许访问

beforeRouteEnter(to,from,next){
  if(from.path == "/home"){
    next()
  }else{
    alert('没有权限')
  }
}

全局后置守卫

初始化的时候被调用

每次路由切换之后被调用

后置路由守卫是没有next的，虽然用的不多，但也有自己的作用，比如：可以用来设置网页的标题

/*
	router.afterEach(to,from)=>{
		// 没有next
		document.title = to.meta.title		// 修改网页的title
	}
*/

守卫流程总结

1. beforeEach 全局前置守卫
2. beforeEnter 路由独享守卫
3. beforeRouteEnter 组件内部守卫
3. afterEach 全局后置守卫
4. 组件的8个生命周期

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior(to,from,savedPosition){
  	// return 期望滚动到哪个的位置
    if(savePosition){
      return savePostion
    }else{
      return {x:0,y:0}
    }
	}
});