vue:vue-router相关

一 路由钩子

1.全局导航钩子主要有两种钩子

全局导航钩子主要有两种钩子：前置守卫、后置钩子

router.beforeEach((to, from, next) => {
  // do someting
});
router.afterEach((to, from) => {
  // do someting
});
注：
    1、to: Route，代表要进入的目标，它是一个路由对象；
    2、from: Route，代表当前正要离开的路由，同样也是一个路由对象；
    3、next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数；
    next参数须知：
            next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是 confirmed（确认的）；
            next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 URL 地址会被重置到 from 路由对应的地址；
            next(‘/’) 和 next({path: ‘/’})：在中断掉当前导航的同时，跳转到一个不同的地址；
            next(error)：如果传入参数是一个 Error 实例，那么导航被终止的同时会将错误传递给 router.onError() 注册过的回调；
    next 方法必须要调用，否则钩子函数无法 resolved；        
    

2. 路由独享的钩子：顾名思义，即单个路由独享的导航钩子，它是在路由配置上直接进行定义的

 cont router = new VueRouter({
   routes: [ {
     path: '/file',
     component: File,
     beforeEnter: (to, from ,next) => { 
       // do someting 
     }}]});

3. 组件内的导航钩子

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的。

二Vue-router的跳转原理

vue-router实现单页面路由跳转，提供了三种方式： hash方式、history模式、abstract模式，根据mode参数来决定采用哪一种方式

● hash: 使用 URL hash 值来作路由。默认模式。

● history: 依赖 HTML5 History API 和服务器配置。查看。

HTML5 History 模式：

1、history.pushState(state, title, url);

第一和第二个参数可以为空，主要就是第三个参数，表示新历史纪录的地址，浏览器在调用pushState()方法后不会去加载这个URL，新的URL不一定要是绝对地址，如果它是相对的，它一定是相对于当前的URL

2、history.replaceState(state, title, url);

window.history.replaceState 和 window.history.pushState 类似， 不同之处在于 replaceState 不会在 window.history 里新增历史记录点，其效果类似于 window.location.replace(url) ， 都是不会在历史记录点里新增一个记录点的。

3、window.onpopstate 来监听url的变化

            window.addEventListener("popstate", function() {
                var currentState = history.state;
                /*
                 * 触发事件后要执行的程序
                */
            });
            //或者
            window.onpopstate = function(){}

● abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端