vueRouter

程序员大侠
107 阅读5分钟

下面介绍 3.x版本

1

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由

2

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

3

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

4

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。

5

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在下面这个例子中，为 /a 路由添加一个 beforeEnter 守卫并不会有任何效果。

6【待学习】

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

7

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

【7.1】全局前置守卫 router.beforeEach

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

【7.2】全局解析守卫 router.beforeResolve在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，才被调用。

【7.3】全局后置钩子 router.afterEach，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {
  // ...
})

【7.4】单个路由的守卫(路由独享守卫) beforeEnter

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

【7.5】组件内的3个守卫： beforeRouterEnter、beforeRouteUpdate、beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    
    // 或者这样。(唯一支持的)在导航被确认之后，执行的回调。
    beforeRouteEnter (to, from, next) {
      next(vm => {
        // 通过 `vm` 访问组件实例
      })
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

8 完整的导航解析流程(管道中的所有钩子)

  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 的回调函数，创建好的组件实例会作为回调函数的参数传入。（对应7）

8.1 普通简单版(仅全局管道)

  1. 导航被触发(即 路由正在发生改变）
  2. 调用全局的 beforeEach 守卫
    • 如果是执行next(),那么就相当于直接【导航被确认】
    • 如果是执行next(false),那么就彻底中断导航管道，保存目前的from，【不再】导航被确认也【不再】开启新的管道。
    • 如果是执行next({path: '/A'})那么会中断当前导航管道，开启新的导航管道(再从步骤1开始)。
  3. 导航被确认

❤️❤️❤️【总结】：

  • next()只能在所有的逻辑路径都不重叠的情况下调用。至少出现一次。否则导航管道会在某一处彻底中断。
  • 如果你在某个守卫中使用了 next('/A')，那么要确保他只在特定的条件下被调用，以避免导致死循环或无限重定向等问题。

8.2 学习依次的to、from、next

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

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

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

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

  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

    • next() : 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
    • next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的【导航管道被中断】，然后进行一个【新的导航管道】。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    • next(error) : (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

8,3 核心总结(有空找一下那段话)

8.4 注意多个

每一种守卫都可以写多个，然后顺序执行。

const router = new VueRouter({
  routes: [...],
});

router.beforeEach((to, from, next) => {
  // 在第一个 beforeEach 中的逻辑处理
  // 调用 next() 继续导航到下一个 beforeEach 或目标路由
  next();
});

router.beforeEach((to, from, next) => {
  // 在第二个 beforeEach 中的逻辑处理
  // 调用 next() 继续导航到下一个 beforeEach 或目标路由
  next();
});

// 又比如
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: [
        (to, from, next) => {
          // 第一个前置守卫的逻辑处理
          console.log('First beforeEach in /foo');
          next();
        },
        (to, from, next) => {
          // 第二个前置守卫的逻辑处理
          console.log('Second beforeEach in /foo');
          next();
        },
      ]
    },
  ]
});
avatar
文章
阅读
粉丝