vue 路由守卫(导航守卫)及其具体使用

// 通过这个匹配判断是否有该权限或要求，这个一般作为页面权限设置，比如哪些页面需要登录才能进入，哪些不需要
to.matched.some(res => res.meta.requireAuth) 

router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪个页面去？
  console.log(from) => // 从哪个页面来？
  next() => // 一个回调函数
}
router.afterEach（to，from） = {}

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
  // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  next(vm => {})
}
beforeRouteUpdate (to, from, next) {
  // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
  // 离开当前路由页面时调用
}

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      ponent: 'Home',
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/ponents/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   ponent: HelloWorld
  },
   {
   path: '/home',
   name: 'home',
   ponent: HomePage
  },
   {
    path:'',
    redirect:'/home'
   }
 ],
})
 router.beforeEach((to,from,next)=>{
  console.log(to);
  console.log(from);
  next();
 })
 export default router;

router.beforeEach((to, from, next) => {
  //我在这里模仿了一个获取用户信息的方法
 let isLogin = window.sessionStorage.getItem('userInfo');
  if (isLogin) {
    //如果用户信息存在则往下执行。
    next()
  } else {
    //如果用户token不存在则跳转到login页面
    if (to.path === '/login') {
      next()
    } else {
      next('/login')
    }
  } 
})

router.afterEach((to,from)=>{ //这里不接收next
  console.log(to);
  console.log(from);
})