vue路由钩子函数

全局的路由钩子函数：beforeEach、afterEach
单个的路由钩子函数：beforeEnter
组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate
全局导航钩子函数：beforeEach

//vue路由导航守卫控制访问权限
//如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面
router.beforeEach((to,from,next)=>{
  // to 将要访问的路径
  //from 代表从那个路径跳转而来
  // next 是一个函数，表示放行
  // next() 放行 next('/login') 强制跳转
  if(to.path === '/login') return next();
  const userInfo  = JSON.parse(localStorage.getItem('userinfo'));
  if(!userInfo) return next('/login');
  next()
})

全局导航钩子函数（afterEach）

afterEach和beforeEach都是属于全局守卫钩子，都是在main.js中进行调用；其中afterEach比beforeEach
少一个next参数
to：即将要进入的路由对象
from：正要离开的路由对象；

afterEach我们一般用来重置页面滚动条位置
假如我们有一个页面很长，滚动后其中的某个位置后跳转，这时新的页面滚动条位置
就会在上一个页面停留的位置；这个时候我们就可以利用afterEach来进行重置

//全局路由改变后钩子
router.afterEach((to, from) => {
  //将滚动条恢复到最顶端
  window.scrollTo(0, 0);
}

路由独享的钩子函数（beforeEnter）
路由独享顾名思义就是指定的路由才有的钩子函数，通常这类路由独享的钩子函数我们是在路由配置文件中进行配置，只能设置改变前的钩子，不能设置改变后的钩子。

const routes=[
    {
        path:'/page1',
        component:page1,
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "computer",
                component: computer
            },
        ],
//路由独享的钩子函数
        beforeEnter:(to,from,next)=>{
            console.log(to);
            console.log(from);
            next(false);
        }
    },
];
const router=new VueRouter({
    routes
});

上述代码理解为只有进入/page1才会触发beforeEnter这个钩子，如果进入其他页面，是不触发的。

组件内的钩子函数

beforeRouteEnter(to,from,next)

在路由进入前调用，因为此时的vue实例还没有创建，所有beforeRouteEnter是唯一一个不能使用this的钩子函数
to：即将要进入的路由对象
from：正要离开的路由对象；
next：路由控制参数

beforeRouteUpdate(to,from,next)

在路由发生修改的时候进行调用，比如动态路由传参，这种情况beforeRouteUpdate也是
会被调用的；
to：即将要进入的路由对象
from：正要离开的路由对象；
next：路由控制参数

beforeRouteLeave(to,from,next)

在路由离开该组件时调用
to：即将要进入的路由对象
from：正要离开的路由对象；
next：路由控制参数

注意：beforeRouteEnter因为触发的时候vue实例还没有创建，所以这个钩子函数中不能使用this，
而beforeRouteUpdate和beforeRouteLeave都是可以访问到实例的，
因为当这两个函数触发的时候实例都已经被创建了；

//路由进入前调用
  beforeRouteEnter (to, from, next) {
    window.document.title  = "欢迎";
    next();
  },
    //路由修改时调用
  beforeRouteUpdate(to,from,next){

  },
   //路由离开时调用
  beforeRouteLeave(to,from,next){

  },