导航守卫

导航守卫的执行顺序

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

导航守卫中next的用处

使导航守卫队列继续向下迭代

为什么afterEach守卫没有next()

afterEach不在导航守卫队列内，没有迭代的next()

beforeEach是否可以叠加

可以叠加的，所有的全局前置守卫按顺序存放在beforeHooks的数组里面

路由跳转经历了哪几部分

（beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < 异步组件加载）这样顺序的queue为第一个，在第一个queue迭代完毕后，执行第二个（beforeRouteEnter < beforeResolve）这样顺序的queue，在执行完毕后，开始执行updateRoute，之后执行全局的afterEach守卫。最后完成路由的跳转。参考转载：baijiahao.baidu.com/s?id=161290…

vue中有多个router-view 时，哪个view 是要显示的组件呢

1、给router-view取个名字：

<router-view name = "view_home"/>

2、在index.js(路由表)中这样写

export default new Router({
  routes: [
    {
      path: '/',
      redirect: 'HomePage'
    },
    {
      path: '/HomePage',
      name: 'HomePage',
      components: {
        view_home: HomePage
      }
    }
  ],
  mode:'history'
})

router-view的属性名（name）view_home 对应路由表中的components属性名view_home 对应的HomePage

一个综合应用的例子

<template>
  <section class="app-main">
    <transition  // 过渡
      name="fade"
      mode="out-in"
    >
      <keep-alive :include="cachedViews"> // include：需要缓存的组件
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { TagsViewModule } from '@/store/modules/tags-view'

@Component({
  name: 'AppMain'
})
export default class extends Vue {
  get cachedViews() {
    return TagsViewModule.cachedViews
  }

  get key() {
    return this.$route.path
  }
}
</script>

vue-router