VueRouter进阶一(导航钩子和路由元信息)

liukai90 发布于2019-08-22 11:05 / 1538人阅读

摘要：有多种方式可以在路由导航发生时执行钩子全局的单个路由独享的或者组件级的。进行管道中的下一个钩子。当前的导航被中断，然后进行一个新的导航。通过访问组件实例路由元信息你可以在中直接访问。

导航钩子

vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。

全局钩子

你可以使用 router.beforeEach 注册一个全局的 before 钩子：

const router = new VueRouter({ ... })

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

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

每个钩子方法接收三个参数：

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

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

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

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

next("/") 或者 next({ path: "/" }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

确保要调用 next 方法，否则钩子就不会被 resolved。

同样可以注册一个全局的 after 钩子，不过它不像 before 钩子那样，after 钩子没有 next 方法，不能改变导航：

router.afterEach(route => {
  // ...
})

你可以在路由配置上直接定义 beforeEnter 钩子：

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

这些钩子与全局 before 钩子的方法参数是一样的。
组件内的钩子

最后，你可以在路由组件内直接定义以下路由导航钩子：

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

beforeRouteEnter 钩子不能访问 this，因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。

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

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

路由元信息

你可以在 beforeRouteLeave 中直接访问 this。这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false) 来取消导航。
定义路由的时候可以配置 meta 字段：

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      children: [
        {
          path: "bar",
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何访问这个 meta 字段呢？

首先，我们称呼 routes 配置中的每个路由对象为路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象（还有在导航钩子中的 route 对象）的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航钩子中检查 meta 字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: "/login",
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

GPU云服务器云服务器路由和导航路由与导航智能路由0元智能无线路由器0元

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91760.html

VueRouter进阶（2）-路由元信息

摘要：简单介绍主人公字段介绍我们称每个路由对象为路由记录，路由记录可以嵌套。所以到我们匹配到一个路有的时候他有可能有多条路由记录。路由元信息为什么会有这个东西呢？我们知道我们浏览一些网站的时候有需要验证登录的也有不需要验证登录的，如果所有页面都在做成验证登录的话对于用户的体验也是极差的，所以这个时候路由元信息就起到了很大的作用。简单介绍主人公：meta字段介绍：我们称每个路由对象为...

CoXie 2019-08-21 18:24 评论0 收藏0
VueRouter进阶四(滚动行为)

摘要：滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。这个方法返回滚动位置的对象信息，长这样如果返回一个布尔假的值，或者是一个空对象，那么不会发生滚动。滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面...

kumfo 2019-08-22 11:05 评论0 收藏0
VueRouter进阶（1）-导航守卫

摘要：简介主要用来通过跳转或取消的方式守卫导航。判断必要操作是否进行没进行的话中断跳转。进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是确认的。中断当前的导航。如果传入的参数是一个实例，则导航会被终止且该错误会被传递给注册过的回调。简介主要用来通过跳转或取消的方式守卫导航。例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。分为三大类：全局守卫...

renweihub 2019-08-21 18:22 评论0 收藏0
Vue路由

摘要：定义路由创建实例，然后传配置创建和挂载根实例。有多种方式可以在路由导航发生时执行钩子全局的单个路由独享的或者组件级的。例如，根据上面的路由配置，这个将会匹配父路由记录以及子路由记录。因此，我们需要遍历来检查路由记录中的字段。 Vue-router(路由) 安装 CDN引入(非打包)： NPM安装(打包)： npm install vue-router 开始使用在使用V...

church 2019-08-21 16:26 评论0 收藏0
Vue-Router（vue路由）

摘要：你可以使用注册一个全局的钩子钩子函数的三个参数即将要进入的目标路由对象当前导航正要离开的路由一定要调用该方法来这个钩子。 Vue-router（路由）在web开发中，router是指根据url分配到对应的处理程序 CDN引入： //vue //vue-router NPM安装 npm install vue-router 开始使用在使用Vue.js的时候，我们通过组合组件来组...

hover_lew 2019-08-21 16:26 评论0 收藏0