使用 router.beforeEach 来处理跳转前逻辑

在某些情况下，我们需要在路由跳转前处理一些特定的业务逻辑，比如修改路由跳转、设置 title 等，代码如下：

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)// 首页const Home = (resolve => { require.ensure(['../views/home.vue'], () => {
resolve(require('../views/home.vue')) })})let base = `${process.env.BASE_URL}`;let router = new Router({ mode: 'history', base: base, routes: [
{
 path: '/',
 name: 'home',
 component: Home,
 meta: { title: '首页' }
}, ]})router.beforeEach((to, from, next) => { let title = to.meta && to.meta.title;
if (title) {
document.title = title; // 设置页面 title }
if (to.name === 'home') {
 // 拦截并跳转至 page2 单页，$openRouter 方法在第 5 节中封装
Vue.$openRouter({
 name: 'page2'
}); }
next();})export default router

注意最后需要调用 next() 方法执行路由跳转。