#### <font color=red /> 6，vue-router导航守卫 >导航守卫? vue-router提供的导航守卫主要用来监听监听路由的进入和离开的. vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发 网页标题是通过\<title>来显示的, 但是SPA只有一个固定的HTML, 切换不同的页面时, 标题并不会改变. 但是我们可以通过JavaScript来修改\<title>的内容.window.document.title = '新的标题'. >利用beforeEach来完成标题的修改. 首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义 其次, 利用导航守卫,修改我们的标题 ```javascript { path: '/About', component : About, meta:{ title: "关于" } }, router.beforeEach((to, from, next) => { window.document.title = to.matched[0].meta.title; next() }); ``` >导航钩子的三个参数解析: to: 即将要进入的目标的路由对象. from: 当前导航即将要离开的路由对象. next: 调用该方法后, 才能进入下一个钩子 ### 路由独享的守卫---beforeEnter >如果不想在全局配置路由的话，可以为某些路由单独配置守卫 比如：给home页面单独配置守卫 ~~~jsx { path: '/', name: "home", component: Home, // 路由独享守卫 beforeEnter: (to, from, next) => { if(from.name === 'about'){ alert("这是从about来的") } else{ alert("这不是从about来的") } next(); // 必须调用来进行下一步操作。否则是不会跳转的 } } ~~~ ### 路由组件内的守卫 * beforeRouteEnter()：进入路由前 * beforeRouteUpdate()：路由复用同一个组件时 * beforeRouteLeave()：离开当前路由时 在Home.vue页面中举个例子 ~~~jsx export default { // 组件内守卫 // 因为这个钩子调用的时候，组件实例还没有被创建出来，因此获取不到this beforeRouteEnter (to, from, next) { console.log(to.name); // 如果想获取到实例的话 // next(vm=>{ // // 这里的vm是组件的实例（this） // }); next(); }, // 路由即将要离开的时候调用此方法 // 比如说，用户编辑了一个东西，但是还么有保存，这时候他要离开这个页面，就要提醒他一下，还没保存，是否要离开 beforeRouteLeave (to, from, next) { const leave = confirm("确定要离开吗？"); if(leave) next() // 离开 else next(false) // 不离开 }, } ~~~ - 对于beforeRouteUpdate的演示例子 ~~~jsx beforeRouteUpdate(to,from,next){ console.log(to.name, from.name); next(); }, ~~~ beforeRouteUpdate被触发的条件是：当前路由改变，但是该组件被复用的时候。 比如说：argu/fu1到argu/f2这个路由，都复用了arg.vue这个组件，这个时候beforeRouteUpdate就会被触发。可以获取到this实例。 ### 一个完整的导航解析流程 ~~~css 1、导航被触发。 2、在失活的组件（即将离开的页面组件）里调用离开守卫。 beforeRouteLeave 3、调用全局的 beforeEach 守卫。 4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。 5、在路由配置里调用（路由独享的守卫） beforeEnter。 6、解析异步路由组件 7、在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter。 8、调用全局的 beforeResolve 守卫 (2.5+)。 9、导航被确认。 10、调用全局的 afterEach 钩子。所有的钩子都触发完了。 11、触发 DOM 更新。 12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。 ~~~