路由.md

路由的守卫分为全局守卫和路由内的守卫，和组件内的守卫。

全局守卫 (一般作用是检查是否登陆验证)

在router包下的index.js中写

//是否登陆的标志 ，通过计算获得
const HAS_LOGINED = true
// 在router实例上进行全局守卫 router实例的beforeEach，这个方法可以注册一个全局前置守卫。
// to 和 from 都是路由对象，to表示即将跳转的路由对象，from表示当前你即将离开的路由对象
// next是一个函数，如果你确定要跳转会用到next函数
router.beforeEach((to, from, next) => {

  //简单演示一下登陆的逻辑
    if(to.name!=="login"){
      if(HAS_LOGINED) next();
      else next({name:"login"})
    }else{
      if(HAS_LOGINED) next({name:"home"})
      else next()
    }
})

路由内的守卫

在router包下的router.js中写

export default [{
    path: '/',
    // 别名使用，访问别名的效果是一样的
    alias: '/home_page',
    name: 'home',
    component: Home,
    //路由内的守卫
    beforeEnter:(to,from,next)=>{
        if(from.name!=="login") alert("这不是从登录页来的")
        else alert("是从登录页来的")
        next()
    }
  }]

组件内的守卫

在任意组件中写

export default {
  name: 'home',
  components: {
    HelloWorld
  },
   beforeRouteEnter(to,from,next){
      //渲染之前的钩子，这里还不能使用this关键字。想得到this关键字可以通过下面这个方法。
       next(vm=>{
           console.log(vm) //这个vm就是this对象
       })
       console.log(' beforeRouteEnter !')
       next()
   },
 //这个也非常有用出，当编辑页面的时候，客户点了退出，可以提醒
    beforeRouteLeave(to,from,next){
        console.log(' beforeRouteLeave !', this)
        const answer = window.confirm('确认离开？')
        answer ? next() : next(false)
  },
    //用处是当路由携带的路径参数发生改变的时候会触发这个钩子，比如说/home/1  变成  /home/2
    beforeRouteUpdate(to,from,next){

    },
	
}

完整的路由渲染流程

/**
 * 1. 导航被触发
 * 2. 在失活的组件（即将离开的页面组件）里调用离开守卫 beforeRouteLeave
 * 3. 调用全局的前置守卫 beforeEach
 * 4. 在重用的组件里调用 beforeRouteUpdate
 * 5. 调用路由独享的守卫 beforeEnter
 * 6. 解析异步路由组件
 * 7. 在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter
 * 8. 调用全局的解析守卫 beforeResolve
 * 9. 导航被确认
 * 10. 调用全局的后置守卫 afterEach
 * 11. 触发DOM更新
 * 12. 用创建好的实例调用beforeRouterEnter守卫里传给next的回调函数
 */

路由携带元数据

作用：当我们想实现某个页面的标题变化额时候可以携带元数据过去。然后通过刚进入的钩子把数据塞进去。

路由中写

  {
    path: '/about',
    name: 'about',
    component: () => import( /* webpackChunkName: "about" */ '@/views/About.vue'),
      meta:{
        title:"关于"
      }
  },

组件中接收：

beforeRouteEnter(to,from,next){
	  //setTitle是工具类。不用理会
      to.meta && setTitle(to.meta.title)
      next()
},