导航守卫

 {   //动态添加路由路径
        path:'/user/:userId',
        component:User,
        meta:{//元数据
            title:'用户'
        },
    },{
        path:'/profile',
        component:Profile,
        meta:{//元数据
            title:'档案'
        },
    }]
const router = new VueRouter({
    //配置路由和组件之间的应用关系
    routes,
    mode:'history',
    linkActiveClass:'laowang'
})
//前置沟子//也叫前置回调
router.beforeEach((to,from,next)=>{
    //从from跳转到to
    document.title=to.matched[0].meta.title;
    next()
})
//后置沟子不用再调用next,再跳转完之后执行
router.afterEach((to,from)=>{

})

全局守卫

    1. 全局前置  beforeEach
    2. 全局解析  beforeResolve
    3. 全局后置  afterEach
    全局守卫
    router.beforeEach((to,from,next)=>{
        console.log('全局 前置')
        next()
    })
     router.beforeResolve((to,from,next)=>{
        console.log('全局 解析')
          next()
    })
     router.afterEach((to,from)=>{
        console.log('全局 后置')//没有next
    })

路由独享

    1. beforeEenter
    写在路由实例中
    beforeEenter((to,from,next)=>{
        console.log('全局 解析')
          next()
    })

组件内的守卫

 1. beforeRouterEnter 进入组件
    2. beforeRouterUpdate 动态路由
    3. beforeRouterLeave 离开
    //写在组件的export中
    beforeRouterEnter((to,from,next)=>{
        console.log('全局 解析')
          next()
    })
     beforeRouterUpdate((to,from,next)=>{
        console.log('全局 解析')
          next()
    })
    //离开
     beforeRouterLeave((to,from,next)=>{
        console.log('全局 解析')
          next()
    })

1. to 要去的路由信息对象
2. from 从哪里来的路由信息对象
3. next 是否放行

1. next() 放行接下来执行
2. next(false) 不放行
3. next('/xxx') next({path:'/xxx'}) 重定向到某个路由上
4. next(error) 抛出异常

/a -> /center顺序

1. 全局前置  beforeEach

2. 路由独享 beforeEenter
3. center组件上定义的组件内守卫 beforeRouterEnter
4. 全局解析 beforeResolve
5. 全局后置 afterEach

/center -> /a顺序

1.beforeRouterLeave 离开 组件守卫

2. 全局前置 beforeEach
3. 全局解析 beforeResolve
4. 全局后置 afterEach

• 组件内的 beforeRouteUpdate 这个在什么时候触发呢 动态路由的时候
• /film/123 -> /film/456

进度条和旋转

    $ npm install -- save nprogress

    1 NProgress.start();加载进度条 写在 全局前置中
    2. NPogress.done();加载接受    写在全局后置中

    使用
    在路由文件中引入 import NProgress from 'nprogress'
    import'nprogress/nprogress.css'