访问页面，如果需要登录后才可以访问，则弹出确认框提示是否跳转。使用element-ui的MessageBox进行提示。

代码

import Vue from 'vue'
import Router from 'vue-router'
import {MessageBox} from 'element-ui';

Vue.use(Router)

const router = new Router({
  base: '/',
  routes: [
    {
      // 业务办理
      path: '/',
      name: 'Home',
      component: resolve => require(['@/views/home'], resolve),
      meta: {
        requiresAuth: false,
        showPage: true
      }
    }, {
      // 办事指南
      path: '/guideTo',
      name: 'guideTo',
      component: resolve => require(['@/views/guideTo'], resolve),
      meta: {
        requiresAuth: false,
        showPage: true
      }
    }, {
      // 登录
      path: '/login',
      name: 'login',
      component: resolve => require(['@/views/login'], resolve),
      meta: {
        requiresAuth: false,
        showPage: true
      }
    }, {
      // 登录
      path: '/forget',
      name: 'forget',
      component: resolve => require(['@/views/forget'], resolve),
      meta: {
        requiresAuth: false,
        showPage: true
      }
    }, {
      // 修改手机号
      path: '/changePhone',
      name: 'changePhone',
      component: resolve => require(['@/views/changePhone'], resolve),
      meta: {
        requiresAuth: true,
        showPage: true
      }
    }, {
      // 修改角色
      path: '/changeRole',
      name: 'changeRole',
      component: resolve => require(['@/views/changeRole'], resolve),
      meta: {
        requiresAuth: true,
        showPage: true
      }
    }, {
      // 注册
      path: '/reg',
      name: 'reg',
      component: resolve => require(['@/views/reg'], resolve),
      meta: {
        requiresAuth: false,
        showPage: true
      }
    }, {
      // 消息通知
      path: '/message',
      name: 'message',
      component: resolve => require(['@/views/message'], resolve),
      meta: {
        requiresAuth: true,
        showPage: true
      }
    }, {
      // 业务申请单
      path: '/applicationForm',
      name: 'applicationForm',
      component: resolve => require(['@/views/applicationForm/applicationForm'], resolve),
      meta: {
        requiresAuth: true,
        showPage: true
      }
    }, {
      // 业务申请单
      path: '/applicationFormDetail',
      name: 'applicationFormDetail',
      component: resolve => require(['@/views/applicationForm/detail'], resolve),
      meta: {
        requiresAuth: true,
        showPage: true
      }
    }, {
      // 业务申请单
      path: '/apply',
      name: 'apply',
      component: resolve => require(['@/views/apply'], resolve),
      meta: {
        requiresAuth: true,
        showPage: true
      }
    }, {
      // 业务申请单
      path: '/applyPay',
      name: 'applyPay',
      component: resolve => require(['@/views/applyPay'], resolve),
      meta: {
        requiresAuth: true,
        showPage: true
      }
    }, {
      // 用户中心
      path: '/user',
      name: 'user',
      component: resolve => require(['@/views/user'], resolve),
      meta: {
        requiresAuth: true,
        showPage: true
      }
    },
  ]
})
router.beforeEach((to, from, next) => {
  console.log(to)
  if (to.meta.requiresAuth) {
    if (!localStorage.getItem('userdata')) {
      MessageBox.confirm('访问此模块需要登录，是否登录或注册？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        next('/login')
      }).catch(() => {
      });
    } else {
      next()
    }
  } else {
    next()
  }
})
//获取原型对象上的push函数
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
export default router