vue中的導航守衛
阿新 • • 發佈：2019-01-16
頁面跳轉 charset code out type {} idt one 1.0
<!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>
vue中的導航守衛