（四）vue-router 路由守卫

（一）vue-router 中的参数

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

const routes = [
  {
    path: '/hello/:id',
    props: true, // 将 id 作为props
    // props 可以是对象
    // props: {
    //   id: 123
    // },
    // props 可以是函数
    // props: (route) => {
    //   return { id: route.query.id }
    // },
    name: 'HelloWorld',
    component: HelloWorld,
    // 路由携带的一些信息 都写在meta中
    meta: {
      pv: {
        page_name: 'hello world',
        page_type: 'activity'
      },
      title: 'hello world page'
    }
  }
]


export default new Router({
  routes, // 路由定义数组
  mode: 'hash', // 路由模式，有 hash / history 两种模式
  base: '/', // 路由前缀
})

（二）路由导航守卫

（1）全局路由守卫：

beforeEach

afterEach

（2）独享路由守卫：

beforeEnter

（3）组件内部的守卫

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

（1） router.beforeEach

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld,
    // 路由携带的一些信息 都写在meta中
    meta: {
      pv: {
        page_name: 'hello world',
        page_type: 'activity'
      },
      title: 'hello world page'
    }
  }, {
    path: '/test',
    name: 'Test',
    component: Test,
    // 路由携带的一些信息 都写在meta中
    meta: {
      pv: {
        page_name: 'test',
        page_type: 'activity'
      },
      title: 'test Page'
    }
  }
]

// new Router 赋给一个值 该值可以调用路由守卫
const router = new Router({
  routes,
  mode: 'hash',
  base: '/',
})

// 路由守卫 beforeEach 传入一个函数
router.beforeEach((to, from, next) => {
  console.log('to', to)
  console.log('from', from)
  next() // 继续向下执行 不写next, 路由不会跳转的
})

export default router

当页面通过 router-link 方法从 / 跳转到 /test?activityId=12&userId=12 时，会触发路由守卫

可以看出 meta、query、params这几个参数还是很重要的

比如我们更改页面 title

router.beforeEach((to, from, next) => {
  console.log('to', to)
  console.log('from', from)
  document.title = to.meta.title // 更改页面title
  next()
})

可以在路由守卫的时候做一些操作，写在beforeEach 函数里，执行完这些操作再 next 跳转

router.beforeEach((to, from, next) => {
  if (to.fullPath === '/') {
    next('/test')
  }
  next()
})

next 里面可以传参数，'/' 或者 { name : Test } 等

注意：路由守卫常用于路由跳转判断是否需要登录等，如果需要就跳转到登录页面

（2）router.afterEach

跳转之后触发某些操作

router.afterEach((to, from) => {
  console.log('jump finished')
  console.log('to', to)
  console.log('from', from)
})

（3）独享守卫

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld,
    meta: {
      pv: {
        page_name: 'hello world',
        page_type: 'activity'
      },
      title: 'hello world page'
    }
  }, {
    path: '/test',
    name: 'Test',
    component: Test,
    // 独享
    beforeEnter: (to, from, next) => {
      console.log('own')
      document.title = to.meta.title
      next()
    },
    meta: {
      pv: {
        page_name: 'test',
        page_type: 'activity'
      },
      title: 'test Page'
    }
  }
]

// new Router 赋给一个值 该值可以调用路由守卫
const router = new Router({
  routes,
  mode: 'hash',
  base: '/',
})

// 全局
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  next()
})

// 全局
router.afterEach((to, from) => {
  console.log('jump finished')
  console.log('to', to)
  console.log('from', from)
})

export default router

注意：先执行全局的，再执行自己独享的

（3）组件内部的路由守卫（钩子函数）

<template>
  <div>Test</div>
</template>

<script>
export default {
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log('组件内部beforeRouteEnter')
    next()
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log('组件内部 beforeRouteUpdate')
    next()
  },
   beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('组件内部 beforeRouteLeave')
    next()
  }
}
</script>

<style>

</style>

画一个图：

beforeRouerLeave：钩子应用，点击返回的时候，弹一个弹窗，问一下 确认要离开嘛？

 

文档：https://router.vuejs.org/zh/