Vue入门十一-- 导航守卫和路由模式

目录

♡ ‧₊˚ 全局守卫 ₊˚ ♡ 

♡ ‧₊˚ 全局前置守卫 ₊˚ ♡ 

♡ ‧₊˚ 全局后置守卫 ₊˚ ♡ 

♡ ‧₊˚路由独享的守卫  ₊˚ ♡ 

♡ ‧₊˚ 组件内的守卫 ₊˚ ♡ 

♡ ‧₊˚ 完整守卫流程 ₊˚ ♡ 

监听路由url地址栏变化

   ♡ ‧₊˚ created ₊˚ ♡ 

  ♡ ‧₊˚ watch ₊˚ ♡   

  ♡ ‧₊˚ 组件内守卫 ₊˚ ♡ 

路由模式

♡ ‧₊˚ hash模式 ₊˚ ♡  

♡ ‧₊˚ history模式 ₊˚ ♡ 

---

“导航”意为路由正在发生变化

♡ ‧₊˚ 全局守卫 ₊˚ ♡ 

全局守卫有全局前置守卫、全局后置守卫。

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next：是一个方法，一定要调用此方法来调用钩子，该方法接收参数为true时表示让钩子向下执行，接收参数为false时表示阻止钩子向下执行。

♡ ‧₊˚ 全局前置守卫 ₊˚ ♡ 

beforeEach（to，from， next）

当从一个路由跳转到另一个路由的时候触发，所以它是跳转前触发的，任何路由跳转都会触发。这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。

♡ ‧₊˚ 全局后置守卫 ₊˚ ♡ 

afterEach（to，from)

和beforeEach相反，它是在路由跳转完成后触发，它发生在beforeEach之后，beforeRouteEnter（组件内守卫）之前。全局后置守卫没有next方法，不需要调用next方法让路由向下执行。

♡ ‧₊˚路由独享的守卫  ₊˚ ♡ 

这个守卫是写在路由里面的，只有当进入这个路由时才会调用的，这些守卫与全局前置守卫的方法参数是一样的。

1.  
   const router = new VueRouter({
2.  
   routes: [
3.  
   {
4.  
   path: '/foo',
5.  
   component: Foo,
6.  
   beforeEnter: (to, from, next) => {
7.  
   // ...
8.  
   }
9.  
   }
10.  
    ]
11.  
    })

♡ ‧₊˚ 组件内的守卫 ₊˚ ♡ 

• beforeRouteEnter

1.  
   beforeRouteEnter(to, from, next) {
2.  
   next();// 手动调用向下执行
3.  
   next(fale);// 阻止路由向下执行
4.  
   },

• beforeRouteUpdate 

1.  
   beforeRouteUpdate(to, from, next) {
2.  
    
3.  
   },

• beforeRouteLeave

1.  
   beforeRouteLeave(to, from, next) {
2.  
   next()
3.  
   }

面试问点： 

组件内守卫的区别？

beforeRouteEnter的"this"无法访问组件实例，指向window。因为该守卫是在导航确认前被调用的，而此时新组件还没被创建。

beforeRouteUpdate 与beforeRouteLeave的"this"可以访问当前组件实例。

但是，我们也可以通过next方法传递一个回调函数给beforeRouteEnter来访问组件实例，在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

1.  
   beforeRouteEnter (to, from, next) {
2.  
   next(vm => {
3.  
   // 通过 `vm` 访问组件实例
4.  
   })
5.  
   }

注意：

 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。因为对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

1.  
   beforeRouteUpdate (to, from, next) {
2.  
   // just use `this`
3.  
   this.name = to.params.name
4.  
   next()
5.  
   }

beforeRouteLeave这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

1.  
   beforeRouteLeave (to, from, next) {
2.  
   const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
3.  
   if (answer) {
4.  
   next()
5.  
   } else {
6.  
   next(false)
7.  
   }
8.  
   }

♡ ‧₊˚ 完整守卫流程 ₊˚ ♡ 

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5 )。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

监听路由url地址栏变化

  ♡ ‧₊˚ created ₊˚ ♡ 

1.  
    created(){
2.  
           console.log(this.$route.params.xxx)
3.  
       }

♡ ‧₊˚ watch ₊˚ ♡ 
  

1.  
    watch:{
2.  
           $route(to,from){
3.  
               // to ---即将进入的路由
4.  
               // from --上一个离开的路由
5.  
               console.log(to.params)
6.  
           }
7.  
       }

  ♡ ‧₊˚ 组件内守卫 ₊˚ ♡ 

1.  
    // 组件内守卫 组件更新触发钩子 user/2
2.  
       beforeRouteUpdate(to,from,next){
3.  
           console.log(to.params)
4.  
       } 

路由模式

♡ ‧₊˚ hash模式 ₊˚ ♡  

vue的默认模式： hash

hash工作原理hashchange事件newRUL,oldURL

1.  
   window.onhashchange = function (event) {
2.  
   console.log(event);
3.  
   }

我们在创建路由对象时设置路由模式

1.  
   const router = new VueRouter({
2.  
   mode: 'hash',
3.  
   routes: [...]
4.  
   })

♡ ‧₊˚ history模式 ₊˚ ♡ 

 history工作原理利用是go back forward

1.  
   const router = new VueRouter({
2.  
   mode: 'history',
3.  
   routes: [...]
4.  
   })

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

面试问点：

路由的两种模式及其区别？

1. hash模式：会在路由路径携带#，不会请求服务器，工作原理是hashchange事件,支持低版本浏览器
2. history模式：不会在路由路径携带#，会请求服务器，工作原理是go/back/ forward，是h5新增的api，不支持低版本浏览器。

这篇好文章是转载于：学新通技术网