By

Vue Router 中的 导航守卫

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

one 完整的导航解析流程

① 导航被触发。
② 在失活的组件里调用离开守卫。
③ 调用全局的 beforeEach 守卫。
④ 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
⑤ 在路由配置里调用 beforeEnter。
⑥ 解析异步路由组件。
⑦ 在被激活的组件里调用 beforeRouteEnter。
⑧ 调用全局的 beforeResolve 守卫 (2.5+)。
⑨ 导航被确认。
⑩ 调用全局的 afterEach 钩子。
⑪ 触发 DOM 更新。
⑫ 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

simplified version 流程

❷ 组件 beforeRouteLeave
❸ 全局 beforeEach
❹ 组件 beforeRouteUpdate
❺ 独享 beforeEnter
❼ 组件 beforeRouteEnter
❽ 全局 beforeResolve
❿ 全局 afterEach

一定要确保调用 next() 方法。 （afterEach 除外）
afterEach 不接收第三个参数 next 函数，也不会改变导航本身

two 流程 demo

全局守卫 global

main.js

// 全局前置守卫
router.beforeEach((to, from, next) => {
    console.log('全局 beforeEach')
    next()
})
// 全局解析守卫
router.beforeResolve((to, from, next) => {
    console.log('全局 beforeResolve')
    next()
})
// 全局后置钩子
router.afterEach((to, from) => {
    console.log('全局 afterEach')
})

路由独享的守卫 single

src/router/index.js

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

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      beforeEnter: (to, from, next) => {
          console.log('独享 HelloWorld beforeEnter')
          next()
      }
    },
    {
    	path: '/foo',
    	name: 'Foo',
    	component: Foo,
    	children: [
            {
            	path: ':id',
            	name: 'FooDetail',
            	component: FooDetail,
            	beforeEnter: (to, from, next) => {
		          console.log('独享 FooDetail beforeEnter')
		          next()
		        }
            },
            {
            	path: 'hello',
            	name: 'HelloWorld',
            	component: HelloWorld,
            	beforeEnter: (to, from, next) => {
		          console.log('独享 HelloWorld beforeEnter')
		          next()
		        }
            }
    	]
    }
  ]
})

组件内的守卫 component

src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1></h1>
    <p @click="goFoo">goFoo</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    goFoo() {
      this.$router.push({name: 'Foo'})
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log('组件内 HelloWorld beforeRouteEnter')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('组件内 HelloWorld beforeRouteUpdate')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('组件内 HelloWorld beforeRouteLeave')
    const answer = confirm('Do you really want to leave')
    if (answer) {
      next()
    } else {
      next(false)
    }
  }
};
</script>

src/components/Foo.vue

<template>
  <div class="foo">
    <h1></h1>
    <router-link :to="{name: 'FooDetail', params: {id: 1}}">to foo1</router-link>
    <router-link to='/foo/2'>to foo2</router-link>
    <span @click="setId(3)">to foo3</span>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'Foo',
  data () {
    return {
      msg: 'Welcome to Foo'
    }
  },
  methods: {
    setId(id) {
    	this.$router.push(`${id}`)
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log('组件内 beforeRouteEnter')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('组件内 beforeRouteUpdate')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('组件内 beforeRouteLeave')
    next()
  }
};
</script>

src/components/FooDetail.vue

<template>
  <div class="foo-detail">
    <h1> </h1>
  </div>
</template>

<script>
export default {
  name: 'FooDetail',
  data () {
    return {
      msg: 'Welcome to FooDetail',
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log('组件内 FooDetail beforeRouteEnter')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('组件内 FooDetail beforeRouteUpdate')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('组件内 FooDetail beforeRouteLeave')
    next()
  }
};
</script>

three 应用场景

beforeEach

1、验证用户是否登录（若未登录，且当前非登录页面，则自动重定向登录页面）；

2、用户权限；

3、控制某个路由只能由某个路由进入

const noReturn = ['/login', '/home']; //登陆后不能回到的页面

router.beforeEach((to, from, next) => {
    // 判断是否有token
	if (store.getters.token) {
        // 有token则不能再回到login页面了
		if (langRouterGenerator(noReturn).indexOf(to.path) !== -1) {
            next(`/${to.path.split('/')[1]}/news`);
        // 判断是否有权限进入
		} else if (hasPermission(store.getters.groups, to.meta.groups)) {
            // 来源受限路由
            if (to.meta.source) { 
                // 控制某个路由只能由某个路由进入
				if (to.meta.source.indexOf(from.meta.id) >= 0 || to.meta.id === from.meta.id || from.name === null) {
                    next();
                // 如果不是在source来源内的路由，则回退
				} else {
					next(false);
                }
            // 正常路由
			} else {
				next();
            }
        // 无权进入
		} else {
			next(`/${to.meta.lang}/401`);
        }
    // 在免登录白名单，直接进入
	} else if (langRouterGenerator(noLoginList).indexOf(to.path) >= 0) { 
        next();
    // 否则全部重定向到登录页
	} else { 
		next(`/${to.path.split('/')[1]}/login`);
	}
});

afterEach

访问不同路由地址，显示每个页面对应的title

router.afterEach(() => {
	window.scrollTo(0, 0); // 跳转后回到页面顶部
	i18n.locale = router.currentRoute.meta.lang; // 全称的lang
	axios.defaults.baseURL = url.base; // 设置axios的根请求路径
	document.title = `${router.currentRoute.name}`;
});

beforeRouteLeave

1、清除当前组件中的定时器

beforeRouteLeave (to, from, next) {  
    window.clearInterval(this.timer) // 清除定时器
    next()
}

2、 当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

3、保存相关内容到Vuex中或Session中

当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中

 beforeRouteLeave (to, from, next) {
     // 保存到localStorage中
    localStorage.setItem(name, content); 
    next()
}

beforeRouteUpdate

在当前路由改变，但是该组件被复用时调用。

1、父路由监听子路由变化

2、对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候

more

vue-router-beforeeach demo 代码请看 github, 项目 v-router-beforeeach