乐趣区

关于前端:VueRouter导航守卫路由元信息五

jiezi

1. 导航守卫


草图。。。导航守卫就像是学校门口的保安。模仿从家到学校的过程，如果有学生证那么就能进入学校；如果没有学生证或失落等能够办理学生证再进入学校；如果没有还不办理，那就拜拜：

所以导航守卫有点像是一个拦截器，如果符合条件则跳转，如果不符合条件则勾销。

1.1 全局守卫

1.1.1 beforeEach


router.js：

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../components/home.vue"

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        haveName: () => import("../components/haveName.vue"),
      },
    },
    {
      path: '/new',
      component: () => import("../components/new.vue"),
    },
  ],
})

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

export default router

看看成果：

to：你上哪儿？from：你从哪儿来？那么 next() 是干什么的？简略来说就是管制跳转和勾销的，如果执行 next() 则可能跳转，执行 next(false) 则不能跳转。

守卫还可能管制点击后跳转到指定的门路，举个例子：

router.beforeEach((to, from, next) => {if (to.path == '/article') {next('/new')
    alert("我应该是'/article'")
  } else {next()
  }
})

看看成果：

1.1.2 beforeResolve

根本同上，区别在于执行工夫稍晚：

1.1.3 afterEach

1.2 路由独享守卫


再来个草图。。。区别于全局守卫，路由独享守卫是指，只有在跳转到规定的门路时才会呈现守卫：

它只有一个钩子函数，beforeEnter：

举个例子：

{
  path: '/about',
  component: () => import("../components/about.vue"),
  beforeEnter: (to, from, next) => {console.log(to)
    console.log(from)
    next()},
},

成果：

router.js 中只为 /about 增加了守卫，所以在切换路由的时候只有进入 /about 时才会触发守卫。

1.3 组件内守卫


区别于全局守卫和路由独享守卫，组件守卫的意思是，组件在哪个门路下，那么这个门路就被守卫了。

1.3.1 beforeRouteEnter


上例子：
hot.vue：

<template>
  <div class="hot">
    近期热门
  </div>
</template>

<script>
export default {beforeRouteEnter (to, from, next) {console.log(to)
    console.log(from)
    next()}
}
</script>

app.vue：

<div class="container">
  <router-view />
  <router-view name="haveName" />
  <router-view name="hot" />
</div>

router.js：

{
  path: '/',
  components: {
    default: Home,
    haveName: () => import("../components/haveName.vue"),
    hot: () => import("../components/hot.vue"),
  },
},

看看成果：

因为根门路 / 和 /hot 两个门路都应用了 hot.vue 这个组件，所以只有在路由切换到这两个门路的时候才会触发组件内守卫。

1.3.2 beforeRouteUpdate


举个例子（动静路由间相互切换）：
news.vue：

beforeRouteUpdate (to, from, next) {console.log(to)
    console.log(from)
    console.log('beforeRouteUpdate')
    next()}

成果：

1.3.3 beforeRouteLeave

1.4 守卫优先级

图例解释，进入商场时首先要通过商场门卫，门卫放行后能力进入商店，而进入商店时也可能会有商店保安，保安容许进入后能力进入商店。套用到路由守卫中，全局守卫最先执行，而后是路由独享守卫或组件内守卫。

1.5 应用场景

全局守卫个别用于登录验证，罕用 beforeEach；
路由独享守卫，某个门路须要被守卫时应用；
组件内守卫，罕用 beforeRouteLeave，用作退出询问。例如来到某个门路时，弹窗，您真的要狠心来到吗？狠心来到。。。有画面了吧。

1.6 解析流程

2. 路由元信息


上例子：
router.js：

{
  path: '/about',
  component: () => import("../components/about.vue"),
  meta: {
    info1: 1,
    info2: true,
    info3: "对于。。。",
  }
},

about.vue：

<template>
  <div class="about">
    对于
  </div>
</template>

<script>
export default {mounted () {console.log(this.$route.meta)
  }
}
</script>

后果：

好的，这就是路由元信息，就是这么简略。。。那么它能做什么，请看下一章 VueRouter（六），联合守卫做的小 demo。

题外话

之前的文章中始终没有贴源码地址。主页有我的 github 地址，源码都在外面，VueRouter 篇的所有代码都在 vue-test-code 这个我的项目下，切换分支即可拿到想要的代码。因为刚开始写文章，有些篇章的确内容太多了，而且构造也不清晰，甚至还有些凌乱。之后的文章会尽量拆分的简短简洁一些。VueRouter 这一部分马上就完结了，将来的文章以及源码都会做的更加清晰，如果文章或源码中存在问题请慷慨留言！

Keep foolish,keep hungry.

退出移动版