导航守卫:即在路由发生改变时通过跳转或取消的方式来守卫导航;
注意:参数或查询的改变并不会触发进入/离开的导航守卫;
导航守卫的方式:全局守卫、单个路由守卫、组件守卫。
route.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
const login = () => {
import(/* webpackChunkName: login */ '../components/login/login.vue')
}
const homePage= () => {
import(/* webpackChunkName: homePage*/ '../components/home/homePage.vue')
}
Vue.use(VueRouter)
const route = [
{
path: '/login',
name: "登陆",
component: login
},
{
path: '/homePage/:id',
name: "首页",
component: homePage,
// 【单个路由守卫】: 当跳转到当前路由时,执行该函数
beforeEnter (to, from, next) {
console.log('单个路由守卫 -> beforeEnter ')
next()
}
}
]
export default () => {
return new VueRouter ({
route ,
mode: 'history',
// 【全局守卫】:即当所有路由发生改变时,首先会执行这2个函数
// 路由发生改变是最先执行的方法
beforeEach (to, from, next) {
// 每次路由跳转之前执行,比如判断用户是否登录(未登录就跳转到登录页)
// to/from为路由跳转前/后的route对象
// 在这里可以做相关的判断 , 再执行next() 或 nexr({path: '/login'})
next()
console.log('全局守卫 -> beforeEach ')
},
beforeResolve (to, from, next) {
console.log('全局守卫 -> beforeResolve ')
},
afterEach (to, from) {
// 每次导航跳转之后触发
console.log('全局守卫 -> afterEach ')
}
})
}
homePage.vue :
<template>
<div>
<span> {{a1}}</span>
</div>
</template>
<script>
export default {
data () {
return {
a1: 'homePage'
}
},
// 【组件守卫】
beforeRouteEnter (to, from, next) {
// 当进入到当前组件时,首先触发的函数
console.log(' 组件守卫 -> beforeRouteEnter ')
next(vm => {
// 此时这个组件尚未被创建,因此通过this对象拿不到组件的上下文
// 如果想在这里拿到数据并赋值到该组件中,可以通过next()中的回调函数的vm完成
})
},
beforeRouteUpdate (to, from, next) {
// 当前路由发生改变时(比如'/homePage/123' => '/homePage/456' )
console.log(' 组件守卫 -> beforeRouteUpdate ')
next()
},
beforeRouteLeave (to, from, next) {
// 当离开当前组件跳转到其他路由时触发
// 比如 用户正在进行表单输入,还没有保存时点击了跳转到其他路由的按钮
// 此时可以弹出一个提示框,确认用户是否要放弃当前未保存的表单而跳转到新的路由
console.log(' 组件守卫 -> beforeRouteLeave ')
next()
}
}
</script>
当执行以上代码时,导航守卫打印的顺序为:
全局守卫 -> beforeEach
单个路由守卫 -> beforeEnter
组件守卫 -> beforeRouteEnter
全局守卫 -> beforeResolve
全局守卫 -> afterEach