vue-路由进阶

发表于 | 分类于

导航守卫

有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。
为此我们有很多种方法可以植入路由的导航过程：全局的, 单个路由独享的, 或者组件级的,

全局守卫

vue-router全局有三个守卫：

  1. router.beforeEach 全局前置守卫 进入路由之前
  2. router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
  3. router.afterEach 全局后置钩子 进入路由之后 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // main.js 入口文件
    import router from './router'; // 引入路由
    router.beforeEach((to, from, next) => { 
      next();
    });
    router.beforeResolve((to, from, next) => {
      next();
    });
    router.afterEach((to, from) => {
      //你也可以注册全局后置钩子，然而和守卫不同的是，
      这些钩子不会接受 next 函数也不会改变导航本身
      console.log('afterEach 全局后置钩子');
    });

to,from,next 这三个参数：
to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
next:Function这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。

  • next() 进入该路由。
  • next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。
  • next 跳转新路由，当前的导航被中断，重新开始一个新的导航。
    我们可以这样跳转：next(‘path地址’)或者next({path:’’})或者next({name:’’})
    且允许设置诸如 replace: true、name: ‘home’ 之类的选项
    以及你用在router-link或router.push的对象选项。

路由独享守卫

如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫：

1
2
3
4
5
6
7
8
9
10
11
12
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => { 
        // 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
        // ...
      }
    }
  ]
})

路由组件内的守卫：

  1. beforeRouteEnter 进入路由前
  2. beforeRouteUpdate (2.2) 路由复用同一个组件时
  3. beforeRouteLeave 离开当前路由时
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    beforeRouteEnter (to, from, next) {
      // 在路由独享守卫后调用 不！能！获取组件实例 `this`，组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 `this`
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用，可以访问组件实例 `this`
    }

beforeRouteEnter访问this
因为钩子在组件实例还没被创建的时候调用，所以不能获取组件实例 this，可以通过传一个回调给next来访问组件实例

但是回调的执行时机在mounted后面,所以在我看来这里对this的访问意义不太大，可以放在created或者mounted里面。

1
2
3
4
5
6
beforeRouteEnter (to, from, next) {
console.log('在路由独享守卫后调用');
  next(vm => {
    // 通过 `vm` 访问组件实例`this` 执行回调的时机在mounted后面，
  })
}

beforeRouteLeave：
导航离开该组件的对应路由时调用，我们用它来禁止用户离开，比如还未保存草稿，或者在用户离开前，将setInterval销毁，防止离开之后，定时器还在调用。

1
2
3
4
5
6
7
beforeRouteLeave (to, from , next) {
  if (文章保存) {
    next(); // 允许离开或者可以跳到别的路由 上面讲过了
  } else {
    next(false); // 取消离开
  }
}

路由钩子函数的错误捕获
如果我们在全局守卫/路由独享守卫/组件路由守卫的钩子函数中有错误，可以这样捕获：

1
2
3
4
router.onError(callback => { 
// 2.4.0新增 并不常用，了解一下就可以了 
  console.log(callback, 'callback');
});

跳转死循环，页面永远空白
我了解到的，很多人会碰到这个问题，来看一下这段伪代码：

1
2
3
4
5
6
7
router.beforeEach((to, from, next) => {
  if(登录){
     next()
  }else{
      next({ name: 'login' }); 
  }
});

看逻辑貌似是对的，但是当我们跳转到login之后，因为此时还是未登录状态，所以会一直跳转到login然后死循环，页面一直是空白的，所以：我们需要把判断条件稍微改一下。

1
if(登录 || to.name === 'login'){ next() } // 登录，或者将要前往login页面的时候，就允许进入路由

全局后置钩子的跳转：
文档中提到因为router.afterEach不接受next函数所以也不会改变导航本身，意思就是只能当成一个钩子来使用，但是我自己在试的时候发现，我们可以通过这种形式来实现跳转：

1
2
3
4
5
6
7
// main.js 入口文件
import router from './router'; // 引入路由
router.afterEach((to, from) => {
  if (未登录 && to.name !== 'login') {
    router.push({ name: 'login' }); // 跳转login
  }
});

完整的路由导航解析流程(不包括其他生命周期)：

  1. 触发进入其他路由。
  2. 调用要离开路由的组件守卫beforeRouteLeave
  3. 调用局前置守卫：beforeEach
  4. 在重用的组件里调用 beforeRouteUpdate
  5. 调用路由独享守卫 beforeEnter。
  6. 解析异步路由组件。
  7. 在将要进入的路由组件中调用beforeRouteEnter
  8. 调用全局解析守卫 beforeResolve
  9. 导航被确认。
  10. 调用全局后置钩子的 afterEach 钩子。
  11. 触发DOM更新(mounted)。
  12. 执行beforeRouteEnter 守卫中传给 next 的回调函数

keep-alive

在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染

文档：和 < transition > 相似，< keep-alive > 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

用法
缓存动态组件：
< keep-alive > 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，此种方式并无太大的实用意义。

1
2
3
4
5
6
7
8
9
10
<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

缓存路由组件：
使用keep-alive可以将所有路径匹配到的路由组件都缓存起来，包括路由组件里面的组件，keep-alive大多数使用场景就是这种。

1
2
3
<keep-alive>
    <router-view></router-view>
</keeo-alive>

keep-alive生命周期

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。

文档：在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。

activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。

activated调用时机：

第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用：

1
2
beforeMount=> 如果你是从别的路由/组件进来(组件销毁destroyed/或离开缓存deactivated)=>
  mounted=> activated 进入缓存组件 => 执行 beforeRouteEnter回调

因为组件被缓存了，再次进入缓存路由/组件时，不会触发这些钩子：

1
// beforeCreate created beforeMount mounted 都不会触发。

所以之后的调用时机是：

1
2
3
组件销毁destroyed/或离开缓存deactivated => activated 进入当前缓存组件 
 => 执行 beforeRouteEnter回调
 // 组件缓存或销毁，嵌套组件的销毁和缓存也在这里触发

deactivated：组件被停用(离开路由)时调用
使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。
这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的的时候做一些事情，你可以放在这个钩子里。
如果你离开了路由，会依次触发：

1
2
3
4
组件内的离开当前路由钩子beforeRouteLeave =>  路由前置守卫 beforeEach =>
全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)
// 如果离开的组件没有缓存的话 beforeDestroy会替换deactivated 
// 如果进入的路由也没有缓存的话  全局后置钩子afterEach=>销毁 destroyed=> beforeCreate等

缓存你想缓存的路由：

新增属性：

include：匹配的 路由/组件 会被缓存
exclude：匹配的 路由/组件 不会被缓存
include和exclude支持三种方式来有条件的缓存路由：采用逗号分隔的字符串形式，正则形式，数组形式。

正则和数组形式，必须采用v-bind形式来使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

但更多场景中，我们会使用keep-alive来缓存路由：

1
2
3
<keep-alive include='a'>
    <router-view></router-view>
</keeo-alive>

  1. 文档： 不会在函数式组件中正常工作，因为它们没有缓存实例。
  2. exclude的优先级大于include
    也就是说：当include和exclude同时存在时，exclude生效，include不生效。
1
2
3
4
<keep-alive include="a,b" exclude="a">
    <!--只有a不被缓存-->
    <router-view></router-view>
</keep-alive>

触发钩子的完整顺序

将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：

  1. beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
  2. beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
  3. beforeEnter: 路由独享守卫
  4. beforeRouteEnter: 路由组件的组件进入路由前钩子。
  5. beforeResolve:路由全局解析守卫
  6. afterEach:路由全局后置钩子
  7. beforeCreate:组件生命周期，不能访问this。
  8. created:组件生命周期，可以访问this，不能访问dom。
  9. beforeMount:组件生命周期
  10. deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
  11. mounted:访问/操作dom。
  12. activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。
  13. 执行beforeRouteEnter回调函数next。

数据获取

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

  • 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示—加载中—之类的指示。
  • 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

    导航完成后获取数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <template>
      <div class="post">
        <div class="loading" v-if="loading">
          Loading...
        </div>

        <div v-if="error" class="error">
          {{ error }}
        </div>

        <div v-if="post" class="content">
          <h2>{{ post.title }}</h2>
          <p>{{ post.body }}</p>
        </div>
      </div>
    </template>

    export default {
      data () {
        return {
          loading: false,
          post: null,
          error: null
        }
      },
      created () {
        // 组件创建完后获取数据，
        // 此时 data 已经被 observed 了
        this.fetchData()
      },
      watch: {
        // 如果路由有变化，会再次执行该方法
        '$route': 'fetchData'
      },
      methods: {
        fetchData () {
          this.error = this.post = null
          this.loading = true
          // replace getPost with your data fetching util / API wrapper
          getPost(this.$route.params.id, (err, post) => {
            this.loading = false
            if (err) {
              this.error = err.toString()
            } else {
              this.post = post
            }
          })
        }
      }
    }

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})
例如：
scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

如果你要模拟『滚动到锚点』的行为：

1
2
3
4
5
6
7
scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

Buy me a cup of coffee,thanks!