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

```

这里是TodoTodoTodoTodoTodoTodo

```

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') ```