vue-router 学习路程中的发现和积累

路由导航

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

注：参数或查询的改变并不会触发进入/离开的导航守卫 (你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。)

全局守卫

• 他的特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数.

• vue-router全局有三个守卫：

  • router.beforeEach 全局前置守卫 进入路由之前
  • router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
  • router.afterEach 全局后置钩子 进入路由之后

beforeEach

在路由跳转前触发，参数包括 to , from , next（参数会单独介绍）三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。

to,from,next 这三个参数

• to: Route: 即将要进入的目标 路由对象即 this.$route, 如: to.path 和 this.$router.path 一样。
• from: Route: 当前导航正要离开的路由

• next: Function: 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。 一定要调用该方法来 resolve 这个钩子,否则路由会中断在这，不会继续往下执行。执行效果依赖 next 方法的调用参数。作用相当于放行。

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

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

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

#### beforeResolve（2.5+）

这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和 beforeEach 区别官方解释为：
+ 区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。

#### afterEach

和beforeEach相反，它是在路由跳转完成后触发，参数包括 to , from ,.没有了 next 也就不会改变导航本身。,他发生在 beforeEach 和 beforeResolve 之后， beforeRouteEnter（组件内守卫）之前。

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

### 路由独享的守卫

是指在单个路由配置的时候也可以设置的钩子函数，也就是组件中都存在这样的钩子函数。目前他只有一个钩子函数beforeEnter 守卫。 它和beforeEach完全相同，如果都设置了，则在beforeEach之后紧随执行，参数都是 to、from、next

const router = new VueRouter({
routes: [

{
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {
    // ...
  }
}

]
})

### 组件内的守卫

你可以在路由组件内直接定义以下路由导航守卫，也可以说成是指在组件内执行的钩子函数。
类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括 beforeRouteEnter、beforeRouteUpdate (2.2+)、beforeRouteLeave三个。

<template>
...
</template>
export default{
data(){

//...

},
beforeRouteEnter (to, from, next) {

// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建

},
beforeRouteUpdate (to, from, next) {

// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 当前路由query变更时，该守卫会被调用
// 可以访问组件实例 `this`

},
beforeRouteLeave (to, from, next) {

// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`

}
}
<style>

+ 这些守卫与全局前置守卫的方法参数是一样的,里面可以开始写逻辑。

#### beforeRouteEnter 

+ 路由进入之前调用，参数包括to，from，next。该钩子在全局守卫 beforeEach 和 独享守卫 beforeEnter 之后，全局 beforeResolve 和全局 afterEach 之前调用，要注意的是该守卫内访问不到组件的实例，因此即将登场的新组件还没被创建,也就是this为undefined，也就是它在 beforeCreate 生命周期前触发。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。（next中函数的调用在mounted之后：为了确保能对组件实例的完整访问）。

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

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

beforeRouteUpdate

在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。参数包括to，from，next。

beforeRouteLeave

导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。这个离开守卫通常用来禁止用户在还未保存修改前突然离开，比如还未保存草稿，或者在用户离开前，将setInterval销毁，防止离开之后，定时器还在调用。

完整的导航解析流程

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 的回调函数。

• 当点击切换路由时：beforeRouterLeave-->beforeEach-->beforeEnter-->beforeRouteEnter-->beforeResolve-->afterEach-->beforeCreate-->created-->beforeMount-->mounted-->beforeRouteEnter

的 next 的回调

• 当路由更新时：beforeRouteUpdate

路有嵌套（子路由）

1. 父组件 中一定要有 <router-view></router-view> 或 <router-view /> 来渲染子路由页面 。
2. 子路由的 path , 不能加 / , 否则路径会被当作根路径，也就是一级路由 来进行匹配，没有则页面变成空白。
3. 父路由重定向到子路由时，redirect: "/ + 父路由的路径 + / + 子路由的路径" 。

路由的 path 路径写错的时候，只会根据所写的 path 来 匹配同级路由规则。 /home/welcome/users，是三级路由，写成了 /home/users， 只会去 匹配 home 下的 直系子路由规则。

1. 路由嵌套如下

const routes = [
  {
    path: '/home',
    component:  () => import("../components/Home.vue"),
    redirect: "/home/welcome",  
    children: [
      {
        path:'welcome',   // 不能加  / ，否则路径会被当作根路径，页面变成空白 。
        component: () => import("../components/Welcome.vue")
      }
    ]
  }
]

路由元信息

定义路由的时候可以配置的 meta 字段，就是 路由元信息。

我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录。一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched.meta 来检查路由记录中的 meta 字段。

$route.matched 数组，包含当前路由的匹配到的嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (如果匹配到子路由，则还会包含 children 数组)。

const routes = [
  {
    path: '/home',
    component:  () => import("../components/Home.vue"),
    meta: {  // 路由信息
      'name':'home',
      'title': '首页',  // 当前菜单
    },
    children: [
      {
        path:'users',
        name: "users",
        component: () => import("../components/Users.vue"),
        meta: {
          'name':'users',
          'title': '用户列表'
        }
      }
    ]
  }
]

/*
 像上面的代码，路径匹配到 /home/users，用 $route.matched 取出数据，会包含了父路由和子路由的路有记录。

路径为 /home ，则 $route.matched数组 只包含父路由 的路有记录。
 */


 //当前路径 为 /home
  console.log( this.$route.matched)

  /*
  [{…}]
    0: {path: "/home", regex: /^\/home(?:\/(?=$))?$/i, components: {…}, instances: {…}, name: undefined, …}
    length: 1
    __proto__: Array(0)
  */

  // 获取meta 字段数据
  console.log( this.$route.matched[0].name)  //  home


 //当前路径 为 /home/users
   console.log( this.$route.matched)
 /*
 (2) [{…}, {…}]
        0: {path: "/home", regex: /^\/home(?:\/(?=$))?$/i, components: {…}, instances: {…}, name: undefined, …}
        1: {path: "/home/users", regex: /^\/home\/users(?:\/(?=$))?$/i, components: {…}, instances: {…}, name: "users", …}
        length: 2
        __proto__: Array(0)
 */

 // 获取meta 字段数据
  console.log( this.$route.matched[0].name)  //  home
  console.log( this.$route.matched[1].name)  //  users


  /*
   以下就是 this.$route.matched[0] 获取到的 路由记录，包含了我们需要的 meta 字段。" > " 代表可以展开，信息很多，请自行了解。
   */
    beforeEnter: undefined    //路由独享的守卫
  >components: {default: {…}}   // 路由所绑定的组件信息
  >instances: {default: VueComponent}
    matchAs: undefined
  >meta: { title: "首页"}
    name: undefined     // 命名路由
    parent: undefined   // 父路由的路有记录
    path: "/home"   // 当前路径
  >props: {}
    redirect: "/home/welcome"  // 重定向的路径
  >regex: /^\/home(?:\/(?=$))?$/i
  >__proto__: Object
  length: 1
  >__proto__: Array(0)

转载及引用

Vue Router
vue-router导航守卫，不懂的来
Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]