<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> /* 全局前置守卫 beforeEach((to, from, next) => {}) 全局解析守卫 beforeResolve((to, from, next) => {}) 全局后置钩子 afterEach((to, from) => {}) router.全局守卫((to, from, [next]) => {}) 路由独享守卫 beforeEnter((to, from, next) => {}) 在配置路由是写在路由配置对象上的 routes: [ { path: '/', component: index, beforeEnter (to, from, next) => { } } ] 组件内守卫 beforeRouteEnter((to, from, next) => {}) beforeRouteUpdate((to, from, next) => {}) beforeRouteLeave((to, from, next) => {}) 组件内守卫写在组件内和组件生周期钩子函数的写法相同 const component = { template: ``, beforeRouteEnter (() => {}), beforeRouteUpdate (() => {}), beforeRouteLeave(() => {}) } */ /* 三种页面跳转 1 直接刷新页面 beforeEach / beforeEnter 组件中的beforeRouteEnter 全局解析守卫 全局后置守卫 路由跳转结束后 开始组件生命周期 创建前 创建后 挂载前 挂载后 2 路由改变但组件不变 全局前置守卫触发 组件内beforeRouteUpdate触发 beforeResolve afterEach 3 路由改变组件改变 组件内beforeRouteLeave beforeEach to组件的路由独享守卫触发 to组件的beforeRouteEnter触发 beforeResolve afterEach to组件创建 to组件挂载前 from组件销毁 to组件挂载 beforeRouteLeave beforEach beforeRouteUpdate beforeEnter beforeRouteEnter beforeResolve afterEach beforeRouteEnter中的this指向window，因为在其触发时组件还没有被创建 */ </script> <div id="app"> <nav> <router-link to="/">首页</router-link> <router-link to="/page">子页面</router-link> </nav> <router-view></router-view> </div> <script src="../vue.js"></script> <script src="../vue-router.js"></script> <script> const Index = { template: ` <div>首页</div> `, beforeCreate () { console.log('首页组件创建前') }, created () { console.log('首页组件创建后') }, beforeMount() { console.log('首页组件挂在前') }, mounted () { console.log('首页组件挂在后') }, beforeDestroy () { console.log('首页销毁前') }, destroyed () { console.log('首页销毁后') }, beforeRouteEnter(to, from, next){ console.log('首页组件的enter守卫') console.log(this) next((vm)=>{ console.log(vm) }) }, beforeRouteUpdate(to, from, next){ console.log('首页组件的update守卫') console.log(this) next() }, beforeRouteLeave(to, from, next){ console.log('首页组件的leave守卫') console.log(this) next() }, } const Page = { template: ` <div>子页面</div> `, beforeCreate () { console.log('page组件创建前') }, created () { console.log('page组件创建后') }, beforeMount() { console.log('page组件挂在前') }, mounted () { console.log('page组件挂在后') }, beforeRouteEnter(to, from, next){ console.log('page组件的enter守卫') }, beforeRouteUpdate(to, from, next){ console.log('page组件的update守卫') next() }, beforeRouteLeave(to, from, next){ console.log('page组件的leave守卫') next() }, } const router = new VueRouter({ routes: [ { path: '/', component: Index, beforeEnter (to, from, next) { console.log('/ 路由的独享守卫触发') next() } }, { path: '/page', component: Page, beforeEnter (to, from, next) { console.log('/page 路由的独享守卫触发') next() } } ] }) router.beforeEach((to, from, next) => { console.log('全局前置守卫触发') next() }) router.beforeResolve((to, from, next) => { console.log('全局解析守卫触发') next() }) router.afterEach((to, from) => { console.log('全局后置守卫触发') }) const app = new Vue({ el: "#app", router }) </script> </body> </html>