VueRouter——导航守卫-路由元信息（五）

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 路由独享守卫

举个例子：

{
  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：

app.vue：

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：

结果：

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

题外话

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

Keep foolish,keep hungry.