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方法让路由向下执行。

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

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

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

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

• beforeRouteEnter

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

• beforeRouteUpdate 

beforeRouteUpdate(to, from, nex