Vue Router 学习 路由钩子

####routes.js

import Todo from '../views/todo.vue'
import Login from '../views/login.vue'

export default [
  {
    path: '/',
    redirect: '/todo'
  },
  {
    path: '/todo/:id',
    props: true,
    component: Todo,
    // 单个路径监听钩子
    beforeEnter (to, from, next) {
      console.log('beforeEnter routes.js')
      next()
    }
  },
  {
    path: '/login',
    component: Login
  }
]

####todo.vue

<template>
  <div>
    <div>这里是TodoTodoTodoTodoTodoTodo</div>
  </div>
</template>

<script>
export default {
  props: ['id'],
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter todo.vue')
    // next()
    // console.log(this) // undefined
    // 在这个回调方法里面直接获取 this 是获取不到，那么需要以下面的方式进行获取
    next(vm => {
      // 这里的 vm 也就相当于当前的 this
      console.log('beforeRouteEnter todo.vue vm.id ', vm.id)
    })
  },
  beforeRouteUpdate (to, from, next) {
    console.log('beforeUpdate todo.vue')
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 可以在这里面添加是否确认离开的提示判断
    console.log('beforeRouteLeave todo.vue')
    if (global.confirm('你确定退出？')) {
      next()
    }
  }
}
</script>

<style>

</style>

####main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 路由全局监听钩子
router.beforeEach((to, from, next) => {
  console.log('beforeEach main.js')
  next()
  // if (to.fullPath === '/todo') {
  //   // next('/login')
  //   next({ path: '/login' })
  // }else{
  //   next()
  // }
})

router.beforeResolve((to, from, next) => {
  console.log('beforeResolve main.js')
  next()
})

router.afterEach((to, from) => {
  console.log('afterEach main.js')
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')